Palette

Sapphire Grotto Waters

The deep, crystal blues found within a hidden, mysterious underwater grotto.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sapphire Grotto Waters 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 Grotto Waters.

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

Data visualization

#00008B#191970#4169E1#6495ED#4682B4

Palette guide

How to use Sapphire Grotto Waters

Overview

The Sapphire Grotto Waters palette dives into the profound and calming depths of an underwater sanctuary. Featuring rich, true blues from the deep navy of #00008B and #191970 to the more vivid royal blue of #4169E1 and the gentle sky blue of #6495ED, this collection exudes stability and trust. Designers can craft compelling narratives with its harmonious range, creating visuals that feel both authoritative and inviting. Developers will find these blues excellent for establishing strong visual hierarchies and intuitive user interfaces. This palette is perfect for projects that aim to communicate reliability, serenity, and a touch of classic elegance.

Best used for

Financial institutions and banking platforms
Government and official organizational branding
Maritime industries and services
Classic web designs and corporate intranets
Educational materials and e-learning platforms
Healthcare and wellness service branding

Suggested color roles

primary

#00008B - A classic deep navy, providing a strong, trustworthy foundation. Ideal for main branding, headers, or backgrounds that demand authority.

secondary

#4169E1 - A vibrant royal blue that offers a compelling accent. Use for important links, active states, or graphic elements requiring attention.

accent

#6495ED - A softer, light blue that provides a gentle highlight or subtle interactive feedback. Great for secondary buttons or informational text.

background

#191970 - A very dark, muted blue that creates a sophisticated backdrop, allowing lighter elements and text to shine with depth.

text

#4682B4 - A steel blue that offers good readability on lighter backgrounds, or use a crisp white for text on darker hues like #00008B.

Accessibility notes

Ensure sufficient contrast when using #4682B4 for text on lighter backgrounds; it may be too dark for some uses.
White text on #00008B, #191970, or #4169E1 will generally provide excellent contrast.
Avoid using #4682B4 as text on a very similar background like #6495ED without checking contrast ratios.
For interactive elements, ensure distinct visual cues beyond color, especially for focus and hover states.

Recommended combinations

Classic Depth

A timeless pairing for headers and body text, conveying professionalism and clarity.

#00008B · #6495ED · #191970

Vibrant Accent

Use #191970 as a background with #4169E1 for impactful calls-to-action or key data visualization.

#191970 · #4169E1 · #6495ED

Subtle Transition

Creates a smooth, cool gradient for informational graphics or background textures.

#191970 · #4682B4 · #6495ED

CSS variables

:root {
  --sapphire-grotto-waters-1: #00008B;
  --sapphire-grotto-waters-2: #191970;
  --sapphire-grotto-waters-3: #4169E1;
  --sapphire-grotto-waters-4: #6495ED;
  --sapphire-grotto-waters-5: #4682B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-grotto-waters": {
        1: "#00008B",
        2: "#191970",
        3: "#4169E1",
        4: "#6495ED",
        5: "#4682B4",
      }
    }
  }
}

Hex values

Color 1#00008B

Color 2#191970

Color 3#4169E1

Color 4#6495ED

Color 5#4682B4

Accessibility

Contrast checker

1:1Fail

3.2:1AA18

5.1:1AA

3.7:1AA18

1:1Fail

3.1:1AA18

5:1AA

3.6:1AA18

3.2:1AA18

3.1:1AA18

1.6:1Fail

1.2:1Fail

5.1:1AA

5:1AA

1.6:1Fail

1.4:1Fail

3.7:1AA18

3.6:1AA18

1.2:1Fail

1.4:1Fail

Similar palettes

More like Sapphire Grotto Waters

Arctic Glacier Lagoon

Arctic Glacier Melt