Palette

Crystal Depths

Shimmering shades of blue plunge into clear, pristine depths, like a magnificent crystal cavern.

CoolElegant5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Crystal Depths 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 Crystal Depths.

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

Data visualization

#000080#0000CD#4169E1#6495ED#ADD8E6

Palette guide

How to use Crystal Depths

Overview

The Crystal Depths palette captures the shimmering allure of a magnificent crystal cavern, with shades of blue plunging into clear, pristine depths. This elegant collection spans from a profound Navy Blue (#000080) and a rich Medium Blue (#0000CD) to the vibrant Royal Blue (#4169E1) and a softer Cornflower Blue (#6495ED). A delicate Light Blue (#ADD8E6) provides an airy, crystalline finish. Designers and developers can leverage these hues to create sophisticated, immersive, and visually compelling digital experiences. It's excellent for luxury branding, corporate websites, or any project that benefits from a deep, elegant, and serene aesthetic, ensuring visual depth and a refined, tranquil atmosphere.

Best used for

Corporate and financial websites
Luxury product branding
Deep sea exploration documentaries
Elegant evening wear fashion
Data visualization dashboards
Sophisticated tech interfaces

Suggested color roles

primary

A strong, dominant blue (#0000CD) for main content areas, hero sections, or significant calls to action, conveying authority.

secondary

Use Royal Blue (#4169E1) for supporting content, subheadings, or secondary interactive elements, providing a vibrant lift.

accent

A deep, powerful accent (#000080) for critical alerts, important links, or sophisticated graphical details, adding gravitas.

background

The lightest shade (#ADD8E6), perfect for an airy, expansive backdrop, allowing the deeper blues to truly shine.

text

Use Navy Blue (#000080) or a deep charcoal like #333333 for dark text on lighter palette colors. White text (#FFFFFF) works excellently on #000080, #0000CD, and #4169E1.

Accessibility notes

The lightest colors (#6495ED, #ADD8E6) require dark text for readability.
Ensure sufficient contrast when pairing #4169E1 with #6495ED for text.
#000080 and #0000CD are excellent for high-contrast text on white or very light backgrounds.
Avoid using light text on mid-tones without verifying contrast ratios.

Recommended combinations

Deep Ocean

Ideal for sophisticated dark mode themes, corporate branding, or powerful data visualizations.

#000080 · #0000CD · #4169E1

Crystal Surface

Excellent for bright, airy website headers, elegant invitations, or serene app interfaces.

#ADD8E6 · #6495ED · #4169E1

Royal Grotto

Suitable for refreshing lifestyle content, eco-conscious product designs, or tranquil digital spaces.

#0000CD · #6495ED · #ADD8E6

CSS variables

:root {
  --crystal-depths-1: #000080;
  --crystal-depths-2: #0000CD;
  --crystal-depths-3: #4169E1;
  --crystal-depths-4: #6495ED;
  --crystal-depths-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "crystal-depths": {
        1: "#000080",
        2: "#0000CD",
        3: "#4169E1",
        4: "#6495ED",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#0000CD

Color 3#4169E1

Color 4#6495ED

Color 5#ADD8E6

Accessibility

Contrast checker

1.4:1Fail

3.3:1AA18

5.4:1AA

10.5:1AAA

1.4:1Fail

2.3:1Fail

3.8:1AA18

7.3:1AAA

3.3:1AA18

2.3:1Fail

1.6:1Fail

3.2:1AA18

5.4:1AA

3.8:1AA18

1.6:1Fail

1.9:1Fail

10.5:1AAA

7.3:1AAA

3.2:1AA18

1.9:1Fail

Similar palettes

More like Crystal Depths