Palette

Celestial Sapphire Dust

Deep blues blend with shimmering starlight, capturing the elusive beauty of cosmic dust.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A1F#2A2A4E#5C5C8C#8F8FD3#C0C0E8

Palette guide

How to use Celestial Sapphire Dust

Overview

The "Celestial Sapphire Dust" palette blends deep blues with shimmering starlight, capturing the elusive beauty of cosmic dust. Starting with the profound #0A0A1F, it deepens through #2A2A4E and #5C5C8C, then brightens into the luminous #8F8FD3 and the ethereal #C0C0E8. This dark, yet mysterious and celestial palette is perfect for designs that aim to convey depth, wisdom, and a touch of the unknown. Developers can utilize these shades for immersive dark mode interfaces, while designers can craft sophisticated branding or digital art that feels both vast and intimately detailed, evoking the quiet majesty of space.

Best used for

Space exploration branding
Sci-fi game interfaces
Luxury tech product design
Astrology and spiritual content
Dark mode web applications
Professional corporate reports

Suggested color roles

primary

#0A0A1F - The core deep blue background, providing an immersive and sophisticated foundation.

secondary

#2A2A4E - Use for secondary panels, card backgrounds, or to define sections in a dark interface.

accent

#C0C0E8 - The lightest shade, perfect for glowing highlights, icons, or to draw attention to key interactive elements.

background

#0A0A1F - The main background, creating a vast, dark, and mysterious cosmic aesthetic.

text

#C0C0E8 - Excellent for primary text on dark backgrounds like #0A0A1F or #2A2A4E, ensuring high readability and a clean look.

Accessibility notes

Text in #C0C0E8 on #0A0A1F provides high contrast, ensuring good readability for all text.
Ensure #8F8FD3 text on #2A2A4E has sufficient contrast for WCAG AA compliance, especially for smaller fonts.
Avoid using #5C5C8C for small or critical text on #2A2A4E as contrast might be borderline.
Use #C0C0E8 for interactive elements to ensure they are easily discoverable against darker shades.

Recommended combinations

Deep Space

Creates a classic dark mode look with bright, readable text and clear hierarchy.

#0A0A1F · #2A2A4E · #C0C0E8

Stardust Gradient

Excellent for smooth, cosmic gradients in backgrounds, headers, or digital art.

#2A2A4E · #5C5C8C · #8F8FD3

Sapphire Glow

Use the lighter shades for detailed illustrations or subtle UI highlights against the deep background.

#0A0A1F · #8F8FD3 · #C0C0E8

CSS variables

:root {
  --celestial-sapphire-dust-1: #0A0A1F;
  --celestial-sapphire-dust-2: #2A2A4E;
  --celestial-sapphire-dust-3: #5C5C8C;
  --celestial-sapphire-dust-4: #8F8FD3;
  --celestial-sapphire-dust-5: #C0C0E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-sapphire-dust": {
        1: "#0A0A1F",
        2: "#2A2A4E",
        3: "#5C5C8C",
        4: "#8F8FD3",
        5: "#C0C0E8",
      }
    }
  }
}

Hex values

Color 1#0A0A1F

Color 2#2A2A4E

Color 3#5C5C8C

Color 4#8F8FD3

Color 5#C0C0E8

Accessibility

Contrast checker

1.4:1Fail

3.1:1AA18

6.5:1AA

11.1:1AAA

1.4:1Fail

2.2:1Fail

4.6:1AA

7.8:1AAA

3.1:1AA18

2.2:1Fail

2.1:1Fail

3.6:1AA18

6.5:1AA

4.6:1AA

2.1:1Fail

1.7:1Fail

11.1:1AAA

7.8:1AAA

3.6:1AA18

1.7:1Fail

Similar palettes

More like Celestial Sapphire Dust

View all dark

Celestial Night Bloom

Abyssal Bioluminescence