Palette

Stellar Dust Trail

A celestial journey of deep purples and shimmering greys, like dust left by a passing comet.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A1A#483D8B#8A2BE2#D8BFD8#DCDCDC

Palette guide

How to use Stellar Dust Trail

Overview

The Stellar Dust Trail palette blends the mystery of deep space with a touch of cosmic vibrancy, offering an elegant mix of deep purples and shimmering grays. Anchored by the profound #1A1A1A, it introduces striking purples like #483D8B and the radiant #8A2BE2, reminiscent of distant nebulae. Lighter, ethereal grays such as #D8BFD8 and #DCDCDC provide crucial contrast and a sense of delicate shimmer. This palette is ideal for designers and developers seeking to create sophisticated, visually rich experiences that convey a sense of wonder and elegance, perfect for interfaces that require a touch of magic.

Best used for

Luxury brand websites
Artistic and creative portfolios
Event invitations and branding
High-end fashion applications
Spiritual or mystical themed designs
Elegant dark mode interfaces

Suggested color roles

primary

Utilize #483D8B for prominent headings, key graphical elements, or section backgrounds to establish a rich, elegant tone.

secondary

Apply #8A2BE2 as a vibrant accent for calls-to-action, interactive highlights, or important notifications, drawing immediate attention.

accent

Use #D8BFD8 for delicate details, hover states, or subtle gradients, adding an ethereal shimmer.

background

The deep #1A1A1A provides a strong, sophisticated background, allowing the purples to truly pop.

text

For primary text on dark backgrounds, use #DCDCDC or white for excellent readability. For secondary text, #D8BFD8 offers a softer touch.

Accessibility notes

Ensure sufficient contrast between text and background, especially for #D8BFD8 on #483D8B, which might require larger text.
Verify that #8A2BE2 has adequate contrast against any background it's used on for interactive elements.
Consider color blindness when using purples and grays; ensure critical information isn't solely conveyed by color.
Use #DCDCDC or white for main body text against #1A1A1A and #483D8B to maintain high legibility.

Recommended combinations

Nebula Core

Perfect for main content areas, with deep background and elegant, readable text.

#1A1A1A · #483D8B · #DCDCDC

Cosmic Glow

Ideal for highlighting features, hero sections, or artistic gradients with vibrant energy.

#483D8B · #8A2BE2 · #D8BFD8

Stardust Shimmer

Great for interactive elements and subtle design flourishes on a dark canvas.

#1A1A1A · #8A2BE2 · #D8BFD8

CSS variables

:root {
  --stellar-dust-trail-1: #1A1A1A;
  --stellar-dust-trail-2: #483D8B;
  --stellar-dust-trail-3: #8A2BE2;
  --stellar-dust-trail-4: #D8BFD8;
  --stellar-dust-trail-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stellar-dust-trail": {
        1: "#1A1A1A",
        2: "#483D8B",
        3: "#8A2BE2",
        4: "#D8BFD8",
        5: "#DCDCDC",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#483D8B

Color 3#8A2BE2

Color 4#D8BFD8

Color 5#DCDCDC

Accessibility

Contrast checker

1.9:1Fail

2.9:1Fail

10.2:1AAA

12.7:1AAA

1.9:1Fail

1.5:1Fail

5.3:1AA

6.6:1AA

2.9:1Fail

1.5:1Fail

3.5:1AA18

4.3:1AA18

10.2:1AAA

5.3:1AA

3.5:1AA18

1.2:1Fail

12.7:1AAA

6.6:1AA

4.3:1AA18

1.2:1Fail

Similar palettes

More like Stellar Dust Trail

View all cool

Astral Glow Nebula

Celestial Echo Nebula

Celestial Nebula Glow

Celestial Nebula Rift

Stellar Nebula Dust

Celestial Comet Dust