Back to palettes

Palette

Sapphire Shroud

A majestic descent into deep sapphire blues, reflecting enigmatic skies or a hidden, precious gem.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A1128#1B2A41#324B6D#4E7CB5#6EA4DB

Palette guide

How to use Sapphire Shroud

Overview

The "Sapphire Shroud" palette offers a majestic descent into deep sapphire blues, reflecting enigmatic skies or a hidden, precious gem. This elegant collection spans from the profound darkness of #0A1128 (Very Dark Blue) and #1B2A41 (Dark Blue) to the more discernible depths of #324B6D (Medium Dark Blue), culminating in the atmospheric #4E7CB5 (Steel Blue) and #6EA4DB (Light Steel Blue). It's an ideal choice for designs requiring a sense of mystery, sophistication, and depth, perfect for high-tech interfaces, luxury brand applications, or artistic endeavors that demand a cool, refined aesthetic.

Best used for

  • Luxury tech brand interfaces
  • High-end corporate websites
  • Museum or art gallery digital displays
  • Elegant evening wear branding
  • Space exploration or astronomy themed content
  • Mysterious game UI or cinematic titles

Suggested color roles

primary

#1B2A41 (Dark Blue) - A deep, sophisticated blue ideal for main backgrounds, headers, or large content blocks, exuding authority.

secondary

#324B6D (Medium Dark Blue) - A supportive blue for sub-sections, card backgrounds, or secondary navigation, providing depth without being too stark.

accent

#4E7CB5 (Steel Blue) - A brighter, more vibrant blue for calls-to-action, key icons, or interactive elements, offering a subtle contrast.

background

#0A1128 (Very Dark Blue) - The deepest color, creating a rich, immersive backdrop that allows lighter elements to truly glow.

text

#6EA4DB (Light Steel Blue) - A light, readable blue perfect for body text against the dark backgrounds, ensuring clarity while maintaining the cool, ethereal mood.

Accessibility notes

  • Crucially, ensure sufficient contrast between lighter blues like #6EA4DB and darker backgrounds, especially #0A1128 and #1B2A41, for all text.
  • Avoid using #4E7CB5 for small text on #324B6D as contrast might be insufficient.
  • Provide clear visual indicators for interactive elements beyond color alone, given the subtle shifts in tone.
  • Consider increasing font size or weight for critical information if using lighter blues on darker backgrounds.

Recommended combinations

Deep Horizon

#0A1128 as a dominant background, with #6EA4DB for primary text and #4E7CB5 for interactive elements.

#0A1128 · #6EA4DB · #4E7CB5

Layered Depth

#1B2A41 for main sections, #324B6D for nested content, and #6EA4DB for text or icons.

#1B2A41 · #324B6D · #6EA4DB

Highlight Glow

#324B6D as a card background, with #4E7CB5 for key details, and #0A1128 for borders.

#324B6D · #4E7CB5 · #0A1128

CSS variables

:root {
  --sapphire-shroud-1: #0A1128;
  --sapphire-shroud-2: #1B2A41;
  --sapphire-shroud-3: #324B6D;
  --sapphire-shroud-4: #4E7CB5;
  --sapphire-shroud-5: #6EA4DB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-shroud": {
        1: "#0A1128",
        2: "#1B2A41",
        3: "#324B6D",
        4: "#4E7CB5",
        5: "#6EA4DB",
      }
    }
  }
}

Related searches

dark sapphire color palettemysterious blue schemeelegant deep blue colorstech UI dark mode palettesophisticated blue branding

Palette colors

Hex values

Color 1#0A1128
·
Color 2#1B2A41
·
Color 3#324B6D
·
Color 4#4E7CB5
·
Color 5#6EA4DB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.1:1Fail
4.3:1AA18
7.1:1AAA
2
1.3:1Fail
1.6:1Fail
3.4:1AA18
5.5:1AA
3
2.1:1Fail
1.6:1Fail
2.1:1Fail
3.4:1AA18
4
4.3:1AA18
3.4:1AA18
2.1:1Fail
1.6:1Fail
5
7.1:1AAA
5.5:1AA
3.4:1AA18
1.6:1Fail

Similar palettes

More like Sapphire Shroud

View all cool
Aurora Horizon Whisper
Azure Sapphire Gleam
Celestial Ocean Mirror
Deep Sapphire Gaze
Midnight Symphony Orchestra
Nocturnal Ocean Gleam