Palette

Stellar Dust Trails

Deep purples and blues blend, evoking the cosmic dust and distant starlight of space.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4B0082#8A2BE2#6A5ACD#00BFFF#E6E6FA

Palette guide

How to use Stellar Dust Trails

Overview

The Stellar Dust Trails palette (#stellar-dust-trails) provides a captivating journey through deep purples and vibrant blues, reminiscent of distant nebulae and cosmic phenomena. Featuring the profound #4B0082 and the striking #8A2BE2, it introduces dynamic contrast with #6A5ACD and the brilliant #00BFFF. The ethereal #E6E6FA offers a delicate touch, ideal for highlights and text. This palette is a fantastic resource for designers and developers looking to inject a sense of wonder, mystery, and vibrant energy into their projects, perfect for creative and immersive digital experiences that stand out.

Best used for

Fantasy and sci-fi game interfaces
Creative agency websites
Spiritual or wellness applications
Event branding for festivals
Artistic digital illustrations
Youth-oriented tech products

Suggested color roles

primary

Use #4B0082 as a dominant background or for large sections to establish a deep, mysterious atmosphere.

secondary

Apply #8A2BE2 for subheadings, active states, or graphic elements to add a vibrant, energetic layer.

accent

The brilliant #00BFFF is perfect for calls-to-action, key navigational elements, or small, impactful details.

background

The deep #4B0082 creates an immersive, cosmic backdrop that allows brighter colors to truly shine.

text

For primary text on dark backgrounds, use #E6E6FA or white for excellent readability. #6A5ACD can be used for secondary text.

Accessibility notes

Ensure sufficient contrast for text, especially when pairing #6A5ACD with #4B0082; consider font size and weight.
Verify that #00BFFF has adequate contrast against all background colors for interactive elements.
Be mindful of color blindness when relying on the distinction between purples and blues for critical information.
Test text legibility on various devices, particularly with the vibrant hues, to prevent eye strain.

Recommended combinations

Cosmic Depth

Ideal for hero sections, providing depth with vibrant accents and clear, ethereal text.

#4B0082 · #8A2BE2 · #E6E6FA

Nebula Glow

Excellent for creating dynamic gradients, interactive elements, or striking visual highlights.

#8A2BE2 · #6A5ACD · #00BFFF

Starlight Spark

Great for calls-to-action and important information, ensuring high visibility and impact.

#4B0082 · #00BFFF · #E6E6FA

CSS variables

:root {
  --stellar-dust-trails-1: #4B0082;
  --stellar-dust-trails-2: #8A2BE2;
  --stellar-dust-trails-3: #6A5ACD;
  --stellar-dust-trails-4: #00BFFF;
  --stellar-dust-trails-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stellar-dust-trails": {
        1: "#4B0082",
        2: "#8A2BE2",
        3: "#6A5ACD",
        4: "#00BFFF",
        5: "#E6E6FA",
      }
    }
  }
}

Hex values

Color 1#4B0082

Color 2#8A2BE2

Color 3#6A5ACD

Color 4#00BFFF

Color 5#E6E6FA

Accessibility

Contrast checker

2.2:1Fail

2.4:1Fail

6.1:1AA

10.5:1AAA

2.2:1Fail

1.1:1Fail

2.8:1Fail

4.8:1AA

2.4:1Fail

1.1:1Fail

2.5:1Fail

4.3:1AA18

6.1:1AA

2.8:1Fail

2.5:1Fail

1.7:1Fail

10.5:1AAA

4.8:1AA

4.3:1AA18

1.7:1Fail

Similar palettes

More like Stellar Dust Trails

View all dark

Galactic Cloud Glow

Celestial Stardust Trails