Palette

Cosmic Dust Trails

Deep purples and bright lavenders evoke the sparkling, ethereal trails of stardust across the cosmos.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Dust Trails 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 Dust Trails.

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

Data visualization

#0A0A1F#301E53#6F3B9B#B46DD9#E6A7FF

Palette guide

How to use Cosmic Dust Trails

Overview

The Cosmic Dust Trails palette combines deep purples and bright lavenders, evoking the sparkling, ethereal trails of stardust across the cosmos. Ranging from the profound #0A0A1F to the luminous #E6A7FF, this collection is perfect for designers creating energetic, vibrant, and mystical digital experiences. It's particularly suitable for dynamic branding, fantasy-themed interfaces, or applications that seek to convey excitement and wonder. Developers can integrate these versatile hex codes, such as the electric #6F3B9B, to build visually captivating applications and websites, ensuring a consistent and enchanting user experience across various digital platforms.

Best used for

Vibrant event branding
Fantasy game UI/UX
Mystical digital art
Bold website headers
Youth-oriented applications
Fashion and beauty promotions

Suggested color roles

primary

#301E53 - A strong, deep purple that serves as an excellent base for large sections or main content areas.

secondary

#6F3B9B - A vibrant electric purple, suitable for supporting elements, secondary buttons, or dynamic data visualization.

accent

#B46DD9 - A striking bright lavender, ideal for drawing attention to calls to action, key highlights, or interactive states.

background

#0A0A1F - The deepest, most enveloping shade, creating a profound and immersive backdrop for all other elements.

text

#E6A7FF or white - Provides clear readability and a vibrant glow against the darker shades within the palette.

Accessibility notes

Ensure sufficient contrast for text, especially when using #6F3B9B on #301E53.
Always use #E6A7FF or white for body text on #0A0A1F and #301E53 to meet WCAG AA standards.
Be cautious with contrast when layering #B46DD9 over #6F3B9B for crucial UI elements.
Test interactive elements for adequate contrast to ensure usability for users with visual impairments.

Recommended combinations

Electric Nebula

Creates a dynamic, layered background that evokes movement and deep space energy.

#0A0A1F · #301E53 · #6F3B9B

Vibrant Stardust

Perfect for drawing attention to key features or calls to action with a bright, shimmering contrast.

#301E53 · #B46DD9 · #E6A7FF

Cosmic Layers

Excellent for establishing clear visual hierarchy, separating content blocks with a deep base and vibrant accents.

#0A0A1F · #6F3B9B · #E6A7FF

CSS variables

:root {
  --cosmic-dust-trails-1: #0A0A1F;
  --cosmic-dust-trails-2: #301E53;
  --cosmic-dust-trails-3: #6F3B9B;
  --cosmic-dust-trails-4: #B46DD9;
  --cosmic-dust-trails-5: #E6A7FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-dust-trails": {
        1: "#0A0A1F",
        2: "#301E53",
        3: "#6F3B9B",
        4: "#B46DD9",
        5: "#E6A7FF",
      }
    }
  }
}

Hex values

Color 1#0A0A1F

Color 2#301E53

Color 3#6F3B9B

Color 4#B46DD9

Color 5#E6A7FF

Accessibility

Contrast checker

1.3:1Fail

2.6:1Fail

5.7:1AA

10.5:1AAA

1.3:1Fail

1.9:1Fail

4.3:1AA18

7.9:1AAA

2.6:1Fail

1.9:1Fail

2.2:1Fail

4.1:1AA18

5.7:1AA

4.3:1AA18

2.2:1Fail

1.8:1Fail

10.5:1AAA

7.9:1AAA

4.1:1AA18

1.8:1Fail

Similar palettes

More like Cosmic Dust Trails

View all vibrant

Celestial Firestorm

Cosmic Nebula Swirl

Galactic Bloom Sparkle

Galactic Nebula Bloom

Galaxy Orb Glow

Astral Nebula Bloom