Palette

Zircon Flash

Clear, sparkling blues that reflect the dazzling, vibrant flash of a precision-cut zircon gemstone.

coolenergetic5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Zircon Flash reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Zircon Flash.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#4C6D82#779EAD#AAD3E1#DAF0F7#3B5A6E

Palette guide

How to use Zircon Flash

Overview

The Zircon Flash palette captures the dazzling, vibrant flash of a precision-cut zircon gemstone with its clear, sparkling blues. This cool and elegant collection ranges from a deep Dark Slate Gray (#3B5A6E) to a serene Light Cyan (#DAF0F7), including a sophisticated Steel Blue (#4C6D82) and a balanced Cadet Blue (#779EAD). Designers and developers can leverage these harmonious blue tones to create sophisticated interfaces, luxurious branding, or crisp digital content that conveys clarity, professionalism, and a modern aesthetic. The palette's cohesive cool tones ensure a polished and visually appealing experience.

Best used for

Tech and software company branding
Luxury product websites
Corporate and professional interfaces
Winter-themed digital campaigns
Jewelry store and fashion design
Modern interior design concepts

Suggested color roles

primary

Steel Blue (#4C6D82) provides a strong, sophisticated base, ideal for primary navigation or key sections.

secondary

Cadet Blue (#779EAD) serves as a balanced mid-tone, perfect for supporting content or secondary elements.

accent

Light Steel Blue (#AAD3E1) offers a bright, reflective highlight for interactive elements or subtle details.

background

Light Cyan (#DAF0F7) creates an airy, pristine background, enhancing readability and a clean aesthetic.

text

For headings, use Dark Slate Gray (#3B5A6E). For body text, a dark gray or black ensures optimal readability.

Accessibility notes

Ensure sufficient contrast for text on the very light Light Cyan (#DAF0F7) background; use dark text like #3B5A6E.
Dark Slate Gray (#3B5A6E) provides excellent contrast against all lighter blues in the palette, suitable for text and UI elements.
Light Steel Blue (#AAD3E1) is light; avoid using it for small text to maintain readability, especially on #DAF0F7.
Steel Blue (#4C6D82) offers good contrast for primary text on lighter backgrounds, making it versatile.

Recommended combinations

Gemstone Depth

Creates a sophisticated gradient from deep to medium blue, ideal for strong backgrounds or branding elements.

#3B5A6E · #4C6D82 · #779EAD

Clear Sparkle

Offers a light, bright, and airy feel, perfect for clean UI, delicate illustrations, or reflective surfaces.

#AAD3E1 · #DAF0F7 · #779EAD

Modern Elegance

Combines a strong base with light, ethereal accents, suitable for corporate designs or minimalist aesthetics.

#4C6D82 · #AAD3E1 · #DAF0F7

CSS variables

:root {
  --zircon-flash-1: #4C6D82;
  --zircon-flash-2: #779EAD;
  --zircon-flash-3: #AAD3E1;
  --zircon-flash-4: #DAF0F7;
  --zircon-flash-5: #3B5A6E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zircon-flash": {
        1: "#4C6D82",
        2: "#779EAD",
        3: "#AAD3E1",
        4: "#DAF0F7",
        5: "#3B5A6E",
      }
    }
  }
}

Hex values

Color 1#4C6D82

Color 2#779EAD

Color 3#AAD3E1

Color 4#DAF0F7

Color 5#3B5A6E

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

4.7:1AA

1.3:1Fail

1.9:1Fail

1.8:1Fail

2.4:1Fail

2.5:1Fail

3.4:1AA18

1.8:1Fail

1.4:1Fail

4.6:1AA

4.7:1AA

2.4:1Fail

1.4:1Fail

6.2:1AA

1.3:1Fail

2.5:1Fail

4.6:1AA

6.2:1AA

Similar palettes

More like Zircon Flash

View all cool

Aqua Marine Sparkle

Azure Horizon

Abstract Ocean Currents

Aegean Blue Depths

Arctic Aurora Hues

Aurora Borealis Dream