Palette

Celestial Void Gaze

A progression from deep, dark blues to cosmic light, capturing the vast, silent mystery of interstellar space.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Void Gaze 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 Void Gaze.

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

Data visualization

#0A0D18#2A2F40#5B6B8A#A6E1FA#D4FAFF

Palette guide

How to use Celestial Void Gaze

Overview

The "Celestial Void Gaze" palette presents a progression from deep, dark blues to cosmic light, capturing the vast, silent mystery of interstellar space. Starting with the profound #0A0D18, it deepens through #2A2F40 and #5B6B8A, then brightens into the luminous #A6E1FA, culminating in the ethereal #D4FAFF. 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

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

secondary

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

accent

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

background

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

text

#D4FAFF - Excellent for primary text on dark backgrounds like #0A0D18 or #2A2F40, ensuring high readability and a clean look.

Accessibility notes

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

Recommended combinations

Deep Void

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

#0A0D18 · #2A2F40 · #D4FAFF

Cosmic Light

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

#2A2F40 · #5B6B8A · #A6E1FA

Starry Gaze

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

#0A0D18 · #A6E1FA · #D4FAFF

CSS variables

:root {
  --celestial-void-gaze-1: #0A0D18;
  --celestial-void-gaze-2: #2A2F40;
  --celestial-void-gaze-3: #5B6B8A;
  --celestial-void-gaze-4: #A6E1FA;
  --celestial-void-gaze-5: #D4FAFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-void-gaze": {
        1: "#0A0D18",
        2: "#2A2F40",
        3: "#5B6B8A",
        4: "#A6E1FA",
        5: "#D4FAFF",
      }
    }
  }
}

Hex values

Color 1#0A0D18

Color 2#2A2F40

Color 3#5B6B8A

Color 4#A6E1FA

Color 5#D4FAFF

Accessibility

Contrast checker

1.5:1Fail

3.6:1AA18

13.6:1AAA

17.5:1AAA

1.5:1Fail

2.5:1Fail

9.4:1AAA

12:1AAA

3.6:1AA18

2.5:1Fail

3.8:1AA18

4.8:1AA

13.6:1AAA

9.4:1AAA

3.8:1AA18

1.3:1Fail

17.5:1AAA

12:1AAA

4.8:1AA

1.3:1Fail

Similar palettes

More like Celestial Void Gaze

View all dark

Celestial Sapphire Dust

Cosmic Dust Whisper

Mystic Nebula Gaze

Celestial Abyss Gaze

Celestial Glimmer Dust

Celestial Night Bloom