Back to palettes

Palette

Deep Sapphire Grotto

Intense, jewel-toned blues evoke the mysterious depths of a secluded grotto shimmering with sapphires.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A2A#1C1C4C#2E2E6E#4A4AA8#6B6BE5

Palette guide

How to use Deep Sapphire Grotto

Overview

The Deep Sapphire Grotto palette evokes the mysterious depths of a secluded grotto shimmering with sapphires, featuring intense, jewel-toned blues. From the profound #0A0A2A to the luminous #6B6BE5, this palette is ideal for designs that demand luxury, mystery, and a sense of hidden beauty. Designers can craft immersive digital experiences, captivating branding, and unique UI themes. Developers will find these hex codes perfect for projects related to high-end products, fantasy, or any application that benefits from a rich, jewel-toned, and visually striking aesthetic. The progression from #1C1C4C to #4A4AA8 allows for excellent depth and vivid highlights.

Best used for

  • Luxury jewelry brand websites
  • Fantasy game environments or branding
  • High-end event invitations
  • Art gallery digital platforms
  • Creative portfolio sites (dark theme)
  • Premium tech product interfaces

Suggested color roles

primary

Utilize #1C1C4C as the main background or primary content color, providing a deep, luxurious, and stable foundation.

secondary

Apply #2E2E6E for secondary content areas, panels, or navigation, offering a rich visual distinction and layered effect.

accent

Introduce #6B6BE5 as a powerful, luminous accent for calls-to-action, key features, or interactive elements, ensuring maximum impact.

background

The deepest hue, #0A0A2A, is excellent for expansive backgrounds or header sections, establishing an immediate tone of profound mystery.

text

For optimal readability, use a crisp white or very light gray. #6B6BE5 can be used for larger headings or highlights on the darkest backgrounds.

Accessibility notes

  • Ensure high contrast for text on #0A0A2A, #1C1C4C, and #2E2E6E by using light text (e.g., white or #6B6BE5).
  • The lightest color, #6B6BE5, provides excellent contrast for primary text against all darker blues in the palette.
  • Avoid using #0A0A2A and #1C1C4C for small text or critical UI elements in close proximity without careful contrast checks.
  • Always test color combinations with accessibility tools to ensure WCAG compliance for readability.

Recommended combinations

Grotto Depths

Ideal for creating a layered, deep background or card system, conveying profound depth and jewel-like elegance.

#0A0A2A · #1C1C4C · #2E2E6E

Sapphire Shimmer

Use #1C1C4C as a base, with #4A4AA8 for secondary elements and #6B6BE5 for luminous, jewel-like highlights or interactive states.

#1C1C4C · #4A4AA8 · #6B6BE5

Mystic Contrast

Excellent for a dark, profound background with a clear, vibrant accent and a strong mid-tone for supporting details.

#0A0A2A · #6B6BE5 · #2E2E6E

CSS variables

:root {
  --deep-sapphire-grotto-1: #0A0A2A;
  --deep-sapphire-grotto-2: #1C1C4C;
  --deep-sapphire-grotto-3: #2E2E6E;
  --deep-sapphire-grotto-4: #4A4AA8;
  --deep-sapphire-grotto-5: #6B6BE5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sapphire-grotto": {
        1: "#0A0A2A",
        2: "#1C1C4C",
        3: "#2E2E6E",
        4: "#4A4AA8",
        5: "#6B6BE5",
      }
    }
  }
}

Related searches

deep blue jewel tone palettesapphire grotto hex codesluxury dark blue UImysterious blue color schemeelegant navy branding

Palette colors

Hex values

Color 1#0A0A2A
·
Color 2#1C1C4C
·
Color 3#2E2E6E
·
Color 4#4A4AA8
·
Color 5#6B6BE5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.6:1Fail
4.5:1AA18
2
1.2:1Fail
1.3:1Fail
2.1:1Fail
3.7:1AA18
3
1.6:1Fail
1.3:1Fail
1.6:1Fail
2.8:1Fail
4
2.6:1Fail
2.1:1Fail
1.6:1Fail
1.7:1Fail
5
4.5:1AA18
3.7:1AA18
2.8:1Fail
1.7:1Fail

Similar palettes

More like Deep Sapphire Grotto

View all dark
Abyss Gaze
Abyssal Bioluminescence
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Depths
Abyssal Midnight Reef