Palette

Sapphire Glimmer Reef

Reflects the deep, rich blues and luminous sparkles of a sunlit sapphire reef.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sapphire Glimmer Reef 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 Sapphire Glimmer Reef.

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

Data visualization

#00203F#264461#1976D2#4FC3F7#B3E5FC

Palette guide

How to use Sapphire Glimmer Reef

Overview

The Sapphire Glimmer Reef palette reflects the deep, rich blues and luminous sparkles of a sunlit sapphire reef. This collection moves from the profound navy of #00203F and the robust #264461 to the vibrant, clear blues of #1976D2 and #4FC3F7, culminating in the airy, near-white #B3E5FC. It's an excellent choice for designs that aim to convey elegance, depth, and a sense of natural wonder, making it suitable for luxury marine brands, travel, or sophisticated digital products. Designers can leverage its dynamic range to create depth, focus, and a feeling of luminous clarity, while developers will appreciate its versatility for UI.

Best used for

Luxury marine or cruise line branding
High-end travel agencies (especially coastal)
Oceanography or environmental initiatives
Modern app interfaces with a fresh feel
Elegant product packaging
Digital art with aquatic themes

Suggested color roles

primary

Use #00203F (Deep Navy Blue) as a very dark, rich primary, ideal for luxurious backgrounds, main headers, or to establish a profound, elegant base.

secondary

Apply #264461 (Dark Slate Blue) as a robust secondary for content panels, subheadings, or as a slightly lighter dark background, adding depth and stability.

accent

Employ #1976D2 (Vibrant Royal Blue) as a strong, engaging accent for calls to action, important icons, or to highlight key information with a touch of brilliance and energy.

background

Utilize #B3E5FC (Very Light Sky Blue) as a clean, airy background that offers excellent readability for darker text and enhances the overall luminous, open feel.

text

For light backgrounds like #B3E5FC, use dark text (e.g., #00203F or black). For dark elements, use a very light text color (e.g., white or #B3E5FC).

Accessibility notes

Ensure strong contrast between #00203F and #B3E5FC for body text.
#264461 or #1976D2 should provide good contrast on #B3E5FC for headings, but check for body text.
Avoid using #B3E5FC as text on a white background; contrast will be poor.
Always check WCAG AA compliance for all text and interactive element color combinations, especially for lighter blues.

Recommended combinations

Reef Depths

A deep, rich combination that provides strong contrast for luxury branding and impactful headlines.

#00203F · #264461 · #1976D2

Sunlit Waters

A harmonious gradient for creating smooth transitions or visually appealing content blocks, evoking light.

#1976D2 · #4FC3F7 · #B3E5FC

Glimmering Edge

High contrast for excellent readability, combining a deep base with a luminous background and a supporting dark blue.

#00203F · #B3E5FC · #264461

CSS variables

:root {
  --sapphire-glimmer-reef-1: #00203F;
  --sapphire-glimmer-reef-2: #264461;
  --sapphire-glimmer-reef-3: #1976D2;
  --sapphire-glimmer-reef-4: #4FC3F7;
  --sapphire-glimmer-reef-5: #B3E5FC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-glimmer-reef": {
        1: "#00203F",
        2: "#264461",
        3: "#1976D2",
        4: "#4FC3F7",
        5: "#B3E5FC",
      }
    }
  }
}

Hex values

Color 1#00203F

Color 2#264461

Color 3#1976D2

Color 4#4FC3F7

Color 5#B3E5FC

Accessibility

Contrast checker

1.6:1Fail

3.6:1AA18

8.2:1AAA

12.1:1AAA

1.6:1Fail

2.2:1Fail

5:1AA

7.5:1AAA

3.6:1AA18

2.2:1Fail

2.3:1Fail

3.4:1AA18

8.2:1AAA

5:1AA

2.3:1Fail

1.5:1Fail

12.1:1AAA

7.5:1AAA

3.4:1AA18

1.5:1Fail

Similar palettes

More like Sapphire Glimmer Reef

View all cool

Aqua Jewel

Celestial Ocean Depth

Celestial Ocean Mirror

Oceanic Gemstone Gleam

Azure Sapphire Gleam

Cobalt Bloom Field