Palette

Sapphire Grotto

Plunge into a hidden sapphire grotto, where deep blues and shimmering aquas reflect mysterious light.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A2A#2C3C6E#4A6CA6#84B9D2#C2E2E6

Palette guide

How to use Sapphire Grotto

Overview

The Sapphire Grotto palette invites users into a tranquil, deep blue realm, reflecting the serene beauty of a hidden cave. This collection spans from the profound, almost black #0A0A2A to the airy, near-white #C2E2E6, offering a versatile gradient for various design needs. Designers can leverage the mid-tones like #4A6CA6 and #84B9D2 to create soft transitions and visual interest. Developers will find this palette excellent for building interfaces that are both calming and highly readable, fostering a sense of peace and depth. It's ideal for conveying elegance, mystery, and a refreshing digital experience.

Best used for

Meditation and mindfulness apps
Luxury travel and resort branding
Environmental science and research websites
Elegant personal portfolios
Ambient lighting product showcases
UI/UX for smart home devices

Suggested color roles

primary

#2C3C6E - A deep, calming blue that sets a serious yet inviting tone. Excellent for main content blocks, headers, or navigation bars.

secondary

#4A6CA6 - A vibrant, medium blue that provides a supportive role, suitable for subheadings, active menu items, or secondary buttons.

accent

#84B9D2 - A bright, clear blue that draws attention without being overpowering, perfect for calls-to-action or subtle highlights.

background

#0A0A2A - The deepest tone, offering a dramatic and immersive backdrop, making lighter elements appear radiant.

text

#C2E2E6 - A very light, almost white blue, providing excellent contrast and readability on dark backgrounds like #0A0A2A or #2C3C6E.

Accessibility notes

Ensure #C2E2E6 or pure white text is used on #0A0A2A, #2C3C6E, and #4A6CA6 for optimal readability.
Avoid using #84B9D2 or #C2E2E6 for text on light backgrounds as contrast will be insufficient.
Check contrast ratios for all text and interactive elements, especially for body copy.
Consider using a slightly darker version of #84B9D2 for links if placed on a white background.

Recommended combinations

Deep Serenity

A high-contrast pair for dark mode themes or elegant typography.

#0A0A2A · #C2E2E6 · #2C3C6E

Grotto Gradient

Creates a smooth visual flow for background elements, data visualizations, or illustrative shadows.

#2C3C6E · #4A6CA6 · #84B9D2

Clear Accent

Use #0A0A2A as a backdrop, #4A6CA6 for main content, and #84B9D2 for key interactive elements.

#0A0A2A · #4A6CA6 · #84B9D2

CSS variables

:root {
  --sapphire-grotto-1: #0A0A2A;
  --sapphire-grotto-2: #2C3C6E;
  --sapphire-grotto-3: #4A6CA6;
  --sapphire-grotto-4: #84B9D2;
  --sapphire-grotto-5: #C2E2E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-grotto": {
        1: "#0A0A2A",
        2: "#2C3C6E",
        3: "#4A6CA6",
        4: "#84B9D2",
        5: "#C2E2E6",
      }
    }
  }
}

Hex values

Color 1#0A0A2A

Color 2#2C3C6E

Color 3#4A6CA6

Color 4#84B9D2

Color 5#C2E2E6

Accessibility

Contrast checker

1.8:1Fail

3.7:1AA18

9:1AAA

14.1:1AAA

1.8:1Fail

2:1Fail

5:1AA

7.7:1AAA

3.7:1AA18

2:1Fail

2.5:1Fail

3.8:1AA18

9:1AAA

5:1AA

2.5:1Fail

1.6:1Fail

14.1:1AAA

7.7:1AAA

3.8:1AA18

1.6:1Fail

Similar palettes

More like Sapphire Grotto

Sapphire Glimmer Pond