Palette

Sapphire Grotto Glow

Enchanting blues and indigos capture the mysterious radiance emanating from a hidden underwater grotto.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F1E3D#1C3664#29508B#457BBC#7BAFD4

Palette guide

How to use Sapphire Grotto Glow

Overview

The Sapphire Grotto Glow palette captures the serene mystery of deep ocean environments, offering a sophisticated range of cool blues. From the profound depth of #0F1E3D to the luminous clarity of #7BAFD4, this collection is ideal for projects requiring a calming yet impactful presence. Designers can leverage the mid-tones like #29508B and #457BBC to create depth and subtle gradients, while developers will appreciate the strong contrast potential for UI elements. This palette evokes tranquility, making it perfect for conveying professionalism and understated elegance. Its rich blues are versatile for both vibrant accents and expansive backgrounds.

Best used for

Luxury brand websites and applications
High-end hospitality and spa branding
Marine and environmental conservation designs
Corporate annual reports and presentations
Digital art and abstract visual projects
Serene home decor product showcasing

Suggested color roles

primary

#1C3664 - A stable, deep blue that serves as a foundational color, conveying reliability and depth. Excellent for main headers or large background sections.

secondary

#29508B - A slightly brighter, more engaging blue to complement the primary, suitable for subheadings, active states, or key graphical elements.

accent

#7BAFD4 - A luminous, light blue that provides a refreshing contrast, perfect for call-to-action buttons, highlights, or interactive elements that need to pop.

background

#0F1E3D - The darkest blue, ideal for creating a profound, immersive background that allows lighter text and elements to stand out dramatically.

text

#457BBC - A versatile mid-tone blue suitable for darker backgrounds, or use a clean white for optimal readability on #0F1E3D or #1C3664.

Accessibility notes

Ensure sufficient contrast between #0F1E3D backgrounds and light text like #7BAFD4 or white for readability.
Avoid placing #1C3664 text on #29508B backgrounds as contrast may be insufficient for smaller fonts.
Use a tool to check WCAG compliance for all text and interactive element color pairings.
For interactive elements, consider adding a :focus state with a distinct outline color, perhaps #7BAFD4.

Recommended combinations

Deep & Light

Creates strong visual hierarchy, ideal for dark mode interfaces or striking header/text pairings.

#0F1E3D · #7BAFD4 · #1C3664

Grotto Gradient

Excellent for subtle background gradients, progress bars, or illustrative elements portraying depth.

#1C3664 · #29508B · #457BBC

Accent Pop

Use #0F1E3D as background, #457BBC for main content, and #7BAFD4 for crucial calls to action.

#0F1E3D · #457BBC · #7BAFD4

CSS variables

:root {
  --sapphire-grotto-glow-1: #0F1E3D;
  --sapphire-grotto-glow-2: #1C3664;
  --sapphire-grotto-glow-3: #29508B;
  --sapphire-grotto-glow-4: #457BBC;
  --sapphire-grotto-glow-5: #7BAFD4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-grotto-glow": {
        1: "#0F1E3D",
        2: "#1C3664",
        3: "#29508B",
        4: "#457BBC",
        5: "#7BAFD4",
      }
    }
  }
}

Hex values

Color 1#0F1E3D

Color 2#1C3664

Color 3#29508B

Color 4#457BBC

Color 5#7BAFD4

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

3.8:1AA18

7:1AAA

1.4:1Fail

1.5:1Fail

2.7:1Fail

5.1:1AA

2.1:1Fail

1.5:1Fail

1.8:1Fail

3.4:1AA18

3.8:1AA18

2.7:1Fail

1.8:1Fail

1.9:1Fail

7:1AAA

5.1:1AA

3.4:1AA18

1.9:1Fail

Similar palettes

More like Sapphire Grotto Glow

View all cool

Abyssal Bioluminescence

Abyssal Current Glide