Palette

Celestial Star Veil

Envision the endless depths of space, veiled in the mystical glow of distant stars.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Star Veil 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 Star Veil.

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

Data visualization

#0A192F#1F3A5F#3B6B9E#6B9FD4#9ECDE7

Palette guide

How to use Celestial Star Veil

Overview

The "Celestial Star Veil" palette invites you to envision the endless depths of space, veiled in the mystical glow of distant stars. It progresses from the profound #0A192F and #1F3A5F, through the rich #3B6B9E, to the luminous #6B9FD4, culminating in the ethereal #9ECDE7. This dark, yet mysterious and elegant palette is perfect for designs that aim to convey depth, wisdom, and a touch of cosmic wonder. 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 a starlit night.

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

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

secondary

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

accent

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

background

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

text

#9ECDE7 - Excellent for primary text on dark backgrounds like #0A192F or #1F3A5F, ensuring high readability and a clean look.

Accessibility notes

Text in #9ECDE7 on #0A192F provides high contrast, ensuring good readability for all text.
Ensure #6B9FD4 text on #1F3A5F has sufficient contrast for WCAG AA compliance, especially for smaller fonts.
Avoid using #3B6B9E for small or critical text on #1F3A5F as contrast might be borderline.
Use #9ECDE7 for interactive elements to ensure they are easily discoverable against darker shades.

Recommended combinations

Midnight Sky

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

#0A192F · #1F3A5F · #9ECDE7

Galaxy Horizon

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

#1F3A5F · #3B6B9E · #6B9FD4

Starry Highlight

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

#0A192F · #6B9FD4 · #9ECDE7

CSS variables

:root {
  --celestial-star-veil-1: #0A192F;
  --celestial-star-veil-2: #1F3A5F;
  --celestial-star-veil-3: #3B6B9E;
  --celestial-star-veil-4: #6B9FD4;
  --celestial-star-veil-5: #9ECDE7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-star-veil": {
        1: "#0A192F",
        2: "#1F3A5F",
        3: "#3B6B9E",
        4: "#6B9FD4",
        5: "#9ECDE7",
      }
    }
  }
}

Hex values

Color 1#0A192F

Color 2#1F3A5F

Color 3#3B6B9E

Color 4#6B9FD4

Color 5#9ECDE7

Accessibility

Contrast checker

1.5:1Fail

3.2:1AA18

6.3:1AA

10.3:1AAA

1.5:1Fail

2.1:1Fail

4.1:1AA18

6.7:1AA

3.2:1AA18

2.1:1Fail

2:1Fail

3.3:1AA18

6.3:1AA

4.1:1AA18

2:1Fail

1.6:1Fail

10.3:1AAA

6.7:1AA

3.3:1AA18

1.6:1Fail

Similar palettes

More like Celestial Star Veil