Palette

Celestial Dust Trail

Deep purples transition into lighter hues, like a mystical cosmic dust trail stretching across the galaxy.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F004F#5A009F#8F00FF#C277FF#E1BBFF

Palette guide

How to use Celestial Dust Trail

Overview

The Celestial Dust Trail palette transitions from deep purples to lighter hues, like a mystical cosmic dust trail stretching across the galaxy. Ranging from the profound #2F004F to the vibrant #E1BBFF, with harmonious intermediate shades like #5A009F, #8F00FF, and #C277FF, this collection exudes elegance and ethereal beauty. It's ideal for designers and developers looking to create immersive, captivating, and sophisticated digital experiences, branding, or interfaces that evoke the vastness and wonder of the cosmos with a luminous touch.

Best used for

Luxury tech product interfaces
Sci-fi and fantasy game environments
Mystical event branding and promotions
Dark mode UI for creative applications
Astronomy-focused educational content
High-end fashion or beauty campaigns

Suggested color roles

primary

#2F004F serves as a dominant, deep background color, establishing a luxurious and mysterious foundation.

secondary

#5A009F or #8F00FF are excellent for secondary sections, navigation, or card backgrounds, adding depth and richness.

accent

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

background

For dark themes, #2F004F is the primary background. For lighter sections, #E1BBFF can serve as a delicate accent background.

text

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

Accessibility notes

#E1BBFF provides strong contrast for text on #2F004F, #5A009F, and #8F00FF, meeting WCAG AA standards.
Be cautious when using #C277FF for small text on #E1BBFF; 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 Aura

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

#2F004F · #E1BBFF · #8F00FF

Galactic Gradient

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

#5A009F · #8F00FF · #C277FF

Luminous Touch

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

#E1BBFF · #2F004F · #5A009F

CSS variables

:root {
  --celestial-dust-trail-1: #2F004F;
  --celestial-dust-trail-2: #5A009F;
  --celestial-dust-trail-3: #8F00FF;
  --celestial-dust-trail-4: #C277FF;
  --celestial-dust-trail-5: #E1BBFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-dust-trail": {
        1: "#2F004F",
        2: "#5A009F",
        3: "#8F00FF",
        4: "#C277FF",
        5: "#E1BBFF",
      }
    }
  }
}

Hex values

Color 1#2F004F

Color 2#5A009F

Color 3#8F00FF

Color 4#C277FF

Color 5#E1BBFF

Accessibility

Contrast checker

1.6:1Fail

2.9:1Fail

6:1AA

10.3:1AAA

1.6:1Fail

1.9:1Fail

3.8:1AA18

6.6:1AA

2.9:1Fail

1.9:1Fail

2:1Fail

3.5:1AA18

6:1AA

3.8:1AA18

2:1Fail

1.7:1Fail

10.3:1AAA

6.6:1AA

3.5:1AA18

1.7:1Fail

Similar palettes

More like Celestial Dust Trail

View all dark

Galactic Nebula Swirl

Celestial Dust Glimmer

Celestial Stardust Trails

Celestial Whisper Nebula

Cosmic Stardust Haze

Stardust Cloudscape