Palette

Sapphire Reef Shimmer

The captivating blues of a vibrant sapphire reef, shimmering under clear waters.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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 Sapphire Reef Shimmer

Overview

The Sapphire Reef Shimmer palette evokes the captivating blues of a vibrant sapphire reef, shimmering under clear waters. Ranging from the profound navy of #000080 to the ethereal light blue of #ADD8E6, this collection offers a dynamic and refreshing spectrum. Designers can create lively yet serene visuals, utilizing the vibrant #4169E1 and #6495ED to add energy and depth. Developers will find these blues excellent for crafting engaging and intuitive user interfaces that convey freshness and sophistication. This palette is ideal for projects that aim to communicate vitality, clarity, and a connection to the natural world.

Best used for

Scuba diving and marine tourism websites
Children's educational apps (marine theme)
Fresh seafood restaurant branding
Water purification and sustainable technology
Summer fashion and swimwear promotions
Digital art inspired by underwater landscapes

Suggested color roles

primary

#0000CD - A strong, vibrant royal blue that sets an energetic yet stable tone. Ideal for main headings, navigation, or key interactive elements.

secondary

#4169E1 - A slightly softer royal blue that complements the primary, suitable for subheadings, informational cards, or active states.

accent

#ADD8E6 - A very light, almost pastel blue that provides a delicate shimmer and refreshing contrast. Perfect for subtle highlights or background textures.

background

#000080 - A deep, classic navy that provides a solid and elegant backdrop, allowing brighter colors to truly pop.

text

#000080 - Excellent for dark, readable text on lighter backgrounds like #ADD8E6 or #6495ED. For dark backgrounds, use white.

Accessibility notes

Ensure white text has sufficient contrast on #000080, #0000CD, and #4169E1 backgrounds.
#ADD8E6 is too light for text on white; use a darker blue like #000080 for readability.
Check contrast ratios for #6495ED text on #ADD8E6 backgrounds, as they are close in value.
For interactive elements, ensure hover/focus states are clearly distinguishable, perhaps by a bold border or slight color shift.

Recommended combinations

Shimmering Contrast

Creates a classic high-contrast pairing for elegant dark mode typography or hero sections.

#000080 · #ADD8E6 · #0000CD

Reef Harmony

Ideal for smooth gradients, data visualizations, or layered graphical elements conveying depth and clarity.

#0000CD · #4169E1 · #6495ED

Vibrant Pop

Use #000080 as a background with #4169E1 for main content and #ADD8E6 for subtle highlights or secondary info.

#000080 · #4169E1 · #ADD8E6

CSS variables

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

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-reef-shimmer": {
        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 Sapphire Reef Shimmer

Abyssal Current Glide