Palette

Cosmic Stardust Haze

Deep blues and soft shimmering accents evoke the mysterious, sparkling beauty of distant nebulae and cosmic dust.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Stardust Haze 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 Stardust Haze.

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

Data visualization

#1B1B3A#3D3A6F#6E6AA8#C1C0D6#F5E8C7

Palette guide

How to use Cosmic Stardust Haze

Overview

The Cosmic Stardust Haze palette conjures the serene beauty of distant nebulae, blending deep blues and purples with soft, ethereal accents. Starting with the profound #1B1B3A, it transitions through the rich #3D3A6F and the elegant #6E6AA8, evoking a sense of tranquil mystery. The lighter #C1C0D6 and the creamy #F5E8C7 provide shimmering highlights, akin to scattered stardust. This palette is ideal for projects requiring sophistication and a touch of cosmic wonder, from elegant web designs to artistic visualizations that need a soft yet impactful presence.

Best used for

Elegant website and app design
Branding for luxury wellness or art companies
Abstract digital art and photography backgrounds
Editorial design with a sophisticated, dreamy feel
Spa or meditation app interfaces
High-end presentation slides

Suggested color roles

primary

Use #1B1B3A as the dominant background color for a deep, encompassing feel, perfect for large sections.

secondary

Employ #3D3A6F for secondary backgrounds, headers, or distinct content blocks, adding subtle variation.

accent

Utilize #F5E8C7 for delicate accents, hovers, or subtle interactive elements, providing a soft glow.

background

The darker hues like #1B1B3A and #3D3A6F create excellent immersive backgrounds.

text

For primary text, use #F5E8C7 or #C1C0D6 against the darker blues and purples. For headings, a pure white can also work.

Accessibility notes

Ensure sufficient contrast between #F5E8C7 or #C1C0D6 and the darker background colors #1B1B3A, #3D3A6F, and #6E6AA8.
Avoid using #6E6AA8 for small body text on #3D3A6F, as contrast might be borderline.
Test legibility of any text set in #C1C0D6 on #F5E8C7 backgrounds, as they are both light.
Consider using a slightly darker version of #C1C0D6 if readability on lighter backgrounds is a concern.

Recommended combinations

Mystic Horizon

Creates a deep, layered background effect with a soft, shimmering accent for text or highlights.

#1B1B3A · #3D3A6F · #F5E8C7

Stardust Glow

Ideal for subtle gradients or section dividers, offering a smooth transition with a bright, readable element.

#3D3A6F · #6E6AA8 · #C1C0D6

Elegant Interface

Combines a dark base with a medium tone for interactive elements and a light, airy text color for elegance.

#1B1B3A · #6E6AA8 · #F5E8C7

CSS variables

:root {
  --cosmic-stardust-haze-1: #1B1B3A;
  --cosmic-stardust-haze-2: #3D3A6F;
  --cosmic-stardust-haze-3: #6E6AA8;
  --cosmic-stardust-haze-4: #C1C0D6;
  --cosmic-stardust-haze-5: #F5E8C7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-stardust-haze": {
        1: "#1B1B3A",
        2: "#3D3A6F",
        3: "#6E6AA8",
        4: "#C1C0D6",
        5: "#F5E8C7",
      }
    }
  }
}

Hex values

Color 1#1B1B3A

Color 2#3D3A6F

Color 3#6E6AA8

Color 4#C1C0D6

Color 5#F5E8C7

Accessibility

Contrast checker

1.6:1Fail

3.4:1AA18

9.3:1AAA

13.6:1AAA

1.6:1Fail

2.1:1Fail

5.8:1AA

8.5:1AAA

3.4:1AA18

2.1:1Fail

2.7:1Fail

4:1AA18

9.3:1AAA

5.8:1AA

2.7:1Fail

1.5:1Fail

13.6:1AAA

8.5:1AAA

4:1AA18

1.5:1Fail

Similar palettes

More like Cosmic Stardust Haze

View all dark

Celestial Dust Trail

Galactic Starlight Veil

Midnight Celestial Bloom

Midnight Stardust Bloom

Mystic Garden Bloom

Starlight Cosmos