Palette

Sapphire Grotto Shimmer

Depicts the deep, mysterious waters of an underwater grotto with hints of light reflecting on blue minerals.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#001F3F#0074D9#7FDBFF#C4F7F2#E0FFFF

Palette guide

How to use Sapphire Grotto Shimmer

Overview

The Sapphire Grotto Shimmer palette evokes the mysterious depths of an underwater grotto, illuminated by shimmering light. Ranging from the profound #001F3F to the ethereal #E0FFFF, this cool-toned collection offers a sense of tranquility and clarity. Designers can craft immersive digital experiences, utilizing the vibrant #0074D9 for impact and the soft #C4F7F2 for delicate accents. Developers will find these blues versatile for creating visually stunning interfaces that maintain readability. This palette is perfect for conveying freshness, innovation, and a connection to nature, suitable for both modern and serene applications.

Best used for

Aquatic-themed websites and branding
Technology and software interfaces
Wellness and meditation applications
Eco-friendly product packaging
Modern interior design visualizations
Educational content on marine life

Suggested color roles

primary

#001F3F - A very deep, almost black blue that grounds the palette, perfect for large background areas or sophisticated branding elements.

secondary

#0074D9 - A vibrant, true blue that provides energy and focus. Ideal for headings, primary buttons, or impactful graphic elements.

accent

#7FDBFF - A bright, clear aqua that adds a refreshing splash. Use for interactive elements, highlights, or small, attention-grabbing details.

background

#C4F7F2 - A very light, almost white aqua that offers a clean, airy backdrop, allowing darker colors to stand out beautifully.

text

#001F3F - Excellent for dark, readable text on lighter backgrounds like #C4F7F2 or #E0FFFF. For dark backgrounds, use white.

Accessibility notes

Ensure #001F3F text has sufficient contrast on #C4F7F2 or #E0FFFF backgrounds.
#0074D9 might need careful pairing for text, as it's a mid-tone. Use white or a very light color for text on it.
The light colors like #C4F7F2 and #E0FFFF should not be used for text on a white background.
Test all color combinations for WCAG 2.1 AA/AAA compliance, especially for critical information.

Recommended combinations

Deep Sea Contrast

Creates a dramatic and clean contrast, ideal for hero sections or dark mode typography.

#001F3F · #E0FFFF · #0074D9

Vibrant Flow

Use for gradients or layered elements that need to convey dynamism and movement.

#0074D9 · #7FDBFF · #C4F7F2

Light Touch

A serene base with a deep anchor, perfect for minimalist designs with clear readability.

#C4F7F2 · #E0FFFF · #001F3F

CSS variables

:root {
  --sapphire-grotto-shimmer-1: #001F3F;
  --sapphire-grotto-shimmer-2: #0074D9;
  --sapphire-grotto-shimmer-3: #7FDBFF;
  --sapphire-grotto-shimmer-4: #C4F7F2;
  --sapphire-grotto-shimmer-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-grotto-shimmer": {
        1: "#001F3F",
        2: "#0074D9",
        3: "#7FDBFF",
        4: "#C4F7F2",
        5: "#E0FFFF",
      }
    }
  }
}

Hex values

Color 1#001F3F

Color 2#0074D9

Color 3#7FDBFF

Color 4#C4F7F2

Color 5#E0FFFF

Accessibility

Contrast checker

3.5:1AA18

10.6:1AAA

14.1:1AAA

15.7:1AAA

3.5:1AA18

3:1Fail

4:1AA18

4.4:1AA18

10.6:1AAA

3:1Fail

1.3:1Fail

1.5:1Fail

14.1:1AAA

4:1AA18

1.3:1Fail

1.1:1Fail

15.7:1AAA

4.4:1AA18

1.5:1Fail

1.1:1Fail

Similar palettes

More like Sapphire Grotto Shimmer