Palette

Cosmic Veil Wonder

A deep and expansive range of purples and blues, capturing the silent, endless wonder of the starry night sky.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Veil Wonder 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 Cosmic Veil Wonder.

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

Data visualization

#0C0C1D#191970#483D8B#6A5ACD#9370DB

Palette guide

How to use Cosmic Veil Wonder

Overview

The Cosmic Veil Wonder palette captures the silent, endless wonder of the starry night sky with a deep and expansive range of purples and blues. It starts with the profound #0C0C1D, moving through the rich #191970 (Midnight Blue) and the sophisticated #483D8B (Dark Slate Blue). Lighter, ethereal shades like #6A5ACD (Slate Blue) and the luminous #9370DB (Medium Purple) complete the spectrum, mimicking distant starlight. This palette is ideal for designs that aim for a sense of awe and quiet contemplation, perfect for educational content, elegant branding, or any project needing a touch of cosmic serenity.

Best used for

Educational platforms and astronomy websites
Elegant corporate branding
Digital art and illustration of night skies
Luxury product packaging
Dark mode interfaces with a sophisticated feel
Presentation slides for serious topics

Suggested color roles

primary

Use #0C0C1D as the dominant background for a truly deep, immersive cosmic experience, ideal for large areas.

secondary

Apply #191970 for secondary backgrounds, panels, or navigation, providing subtle structure.

accent

Utilize #9370DB for highlighting key information, interactive elements, or a soft, ethereal glow.

background

The darker shades #0C0C1D and #191970 create powerful, mysterious backdrops.

text

For body text, use #9370DB or #6A5ACD against the darker backgrounds. For headings, a crisp white works well.

Accessibility notes

Ensure #9370DB and #6A5ACD provide sufficient contrast when used as text on #0C0C1D, #191970, and #483D8B backgrounds.
Avoid using #483D8B text on #191970 backgrounds for small text, as contrast might be low.
When using these blues and purples for data visualization, ensure distinct enough shades for colorblind users.
Consider providing a pure white text option for maximum legibility on the darkest backgrounds.

Recommended combinations

Starry Night UI

Creates an immersive dark mode UI with a profound background, a slightly lighter panel, and a clear, readable text color.

#0C0C1D · #191970 · #9370DB

Cosmic Layers

Ideal for layered elements, offering depth with a soft blue-purple accent for interactive components or icons.

#191970 · #483D8B · #6A5ACD

Mystic Gradient

Perfect for subtle background gradients or visual storytelling, moving from deep space to ethereal light.

#0C0C1D · #483D8B · #9370DB

CSS variables

:root {
  --cosmic-veil-wonder-1: #0C0C1D;
  --cosmic-veil-wonder-2: #191970;
  --cosmic-veil-wonder-3: #483D8B;
  --cosmic-veil-wonder-4: #6A5ACD;
  --cosmic-veil-wonder-5: #9370DB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-veil-wonder": {
        1: "#0C0C1D",
        2: "#191970",
        3: "#483D8B",
        4: "#6A5ACD",
        5: "#9370DB",
      }
    }
  }
}

Hex values

Color 1#0C0C1D

Color 2#191970

Color 3#483D8B

Color 4#6A5ACD

Color 5#9370DB

Accessibility

Contrast checker

1.3:1Fail

2.1:1Fail

3.6:1AA18

5.1:1AA

1.3:1Fail

1.6:1Fail

2.8:1Fail

3.9:1AA18

2.1:1Fail

1.6:1Fail

1.7:1Fail

2.4:1Fail

3.6:1AA18

2.8:1Fail

1.7:1Fail

1.4:1Fail

5.1:1AA

3.9:1AA18

2.4:1Fail

1.4:1Fail

Similar palettes

More like Cosmic Veil Wonder

View all dark

Celestial Night Bloom

Midnight Star Dust

Celestial Sapphire Dust

Cosmic Deep Slumber

Cosmic Dust Whisper

Cosmic Reaches