Palette

Celestial Lanterns

Deep space purples illuminated by soft, distant pinks, like faint galaxies glowing in the cosmic night.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#211A40#4A2E63#784282#B05AA1#E072B2

Palette guide

How to use Celestial Lanterns

Overview

The Celestial Lanterns palette illuminates deep space purples with soft, distant pinks, like faint galaxies glowing in the cosmic night. Ranging from the profound #211A40 to the luminous #E072B2, with harmonious intermediate shades like #4A2E63, #784282, and #B05AA1, this collection exudes a dark, mystical, and deep aura. It's ideal for designers and developers looking to create immersive, captivating, and sophisticated digital experiences, branding, or interfaces that blend cosmic mystery with a touch of warm, ethereal light.

Best used for

Sci-fi game interfaces and concept art
Luxury spiritual or wellness apps
Mystical event promotions
Dark mode UI for creative platforms
Astronomy-focused educational content
High-end fashion or beauty campaigns

Suggested color roles

primary

#211A40 serves as a dominant, deep background color, establishing a luxurious and mysterious foundation.

secondary

#4A2E63 or #784282 are excellent for secondary sections, navigation, or card backgrounds, adding depth and richness.

accent

#E072B2 or #B05AA1 provides a luminous highlight for interactive elements, calls to action, or subtle glowing effects.

background

For dark themes, #211A40 is the primary background. For lighter sections, #E072B2 can serve as a delicate accent background.

text

#E072B2 or #B05AA1 offers excellent readability against the darker shades. A near-white is also suitable.

Accessibility notes

#E072B2 provides strong contrast for text on #211A40, #4A2E63, and #784282, meeting WCAG AA standards.
Be cautious when using #B05AA1 for small text on #E072B2; ensure sufficient contrast.
Ensure interactive elements using lighter shades on darker backgrounds have clear focus states.
This palette offers good options for high contrast text pairings, especially with the lightest and darkest shades.

Recommended combinations

Cosmic Lantern

Ideal for a sophisticated dark mode interface with clear hierarchy and a vibrant accent.

#211A40 · #E072B2 · #784282

Galactic Glow

Perfect for background fills or hero sections, creating a smooth, ethereal transition.

#4A2E63 · #784282 · #B05AA1

Luminous Path

Use #E072B2 as a light background for specific content blocks, with dark text and a deeper accent.

#E072B2 · #211A40 · #4A2E63

CSS variables

:root {
  --celestial-lanterns-1: #211A40;
  --celestial-lanterns-2: #4A2E63;
  --celestial-lanterns-3: #784282;
  --celestial-lanterns-4: #B05AA1;
  --celestial-lanterns-5: #E072B2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-lanterns": {
        1: "#211A40",
        2: "#4A2E63",
        3: "#784282",
        4: "#B05AA1",
        5: "#E072B2",
      }
    }
  }
}

Hex values

Color 1#211A40

Color 2#4A2E63

Color 3#784282

Color 4#B05AA1

Color 5#E072B2

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

3.7:1AA18

5.6:1AA

1.4:1Fail

1.6:1Fail

2.6:1Fail

3.9:1AA18

2.3:1Fail

1.6:1Fail

1.7:1Fail

2.5:1Fail

3.7:1AA18

2.6:1Fail

1.7:1Fail

1.5:1Fail

5.6:1AA

3.9:1AA18

2.5:1Fail

1.5:1Fail

Similar palettes

More like Celestial Lanterns

View all dark

Cosmic Drift Dust

Celestial Shimmer Glow

Cosmic Dream Dust

Cosmic Dreamscape Dust

Cosmic Dust Glow

Dark Galaxy Nebula