Palette

Cosmic Night Bloom

Deep space blues and purples, capturing the quiet grandeur of a cosmic night sky where distant blooms glow.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Night Bloom 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 Night Bloom.

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

Data visualization

#1A1B29#4B0082#8A2BE2#C6B2D1#E6E2EE

Palette guide

How to use Cosmic Night Bloom

Overview

The Cosmic Night Bloom palette captures the quiet grandeur of a cosmic night sky where distant blooms glow, blending deep space blues and purples. It grounds itself with the profound #1A1B29 (dark charcoal) and the rich #4B0082 (dark violet), transitioning through the vibrant #8A2BE2 (blue-violet). The palette culminates in the softer, ethereal #C6B2D1 (light lavender) and the very light #E6E2EE (off-white). This dark and mystical collection is perfect for designers and developers crafting serene, sophisticated, or elegant digital experiences. It excels in creating atmospheric backgrounds, subtle branding, and UI elements that convey depth, tranquility, and a touch of celestial magic.

Best used for

Elegant dark mode app interfaces and websites
Mystical brand identity and luxurious packaging
Abstract digital art and serene space illustrations
High-end fashion or beauty campaigns with ethereal vibes
Cinematic title sequences and contemplative game environments
Sophisticated event invitations and signage

Suggested color roles

primary

Utilize #1A1B29 as a deep, anchoring background color, establishing a calm, dark canvas for elements to subtly bloom.

secondary

Employ #4B0082 for significant content areas, subheadings, or distinct sections, offering a rich, supporting purple hue.

accent

Apply #8A2BE2 for subtle highlights, interactive states, or as a secondary text color on very dark backgrounds, adding a touch of sophisticated violet.

background

The darker shades like #1A1B29 and #4B0082 are ideal for expansive, tranquil backdrops, while #C6B2D1 can be used for subtle, glowing elements.

text

For optimal readability on dark backgrounds like #1A1B29 or #4B0082, use #E6E2EE or a crisp white. A deep charcoal or black provides excellent contrast on #C6B2D1 or #E6E2EE.

Accessibility notes

Ensure sufficient contrast between #E6E2EE or #C6B2D1 and the darker background colors, especially for body text.
White text on #1A1B29, #4B0082, and #8A2BE2 generally provides good readability.
Avoid using #8A2BE2 as a text color on #4B0082 due to potential low contrast; reserve it for larger UI elements.
Test color combinations for legibility across various screen types and lighting conditions to maintain the desired mood.

Recommended combinations

Deep Night Sky

Creates a deep, harmonious dark base perfect for backgrounds or subtle layering in complex UI designs.

#1A1B29 · #4B0082 · #8A2BE2

Celestial Bloom

Ideal for subtle gradients, ethereal overlays, or conveying a soft, luminous glow in illustrations and decorative elements.

#8A2BE2 · #C6B2D1 · #E6E2EE

Night Contrast

Excellent for establishing clear hierarchy, with a light highlight against a dark canvas, enhanced by a rich violet accent.

#1A1B29 · #E6E2EE · #8A2BE2

CSS variables

:root {
  --cosmic-night-bloom-1: #1A1B29;
  --cosmic-night-bloom-2: #4B0082;
  --cosmic-night-bloom-3: #8A2BE2;
  --cosmic-night-bloom-4: #C6B2D1;
  --cosmic-night-bloom-5: #E6E2EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-night-bloom": {
        1: "#1A1B29",
        2: "#4B0082",
        3: "#8A2BE2",
        4: "#C6B2D1",
        5: "#E6E2EE",
      }
    }
  }
}

Hex values

Color 1#1A1B29

Color 2#4B0082

Color 3#8A2BE2

Color 4#C6B2D1

Color 5#E6E2EE

Accessibility

Contrast checker

1.3:1Fail

2.9:1Fail

8.7:1AAA

13.4:1AAA

1.3:1Fail

2.2:1Fail

6.6:1AA

10.2:1AAA

2.9:1Fail

2.2:1Fail

3:1AA18

4.7:1AA

8.7:1AAA

6.6:1AA

3:1AA18

1.5:1Fail

13.4:1AAA

10.2:1AAA

4.7:1AA

1.5:1Fail

Similar palettes

More like Cosmic Night Bloom

View all dark

Celestial Shimmer Glow

Cosmic Dreamscape Dust