Palette

Cosmic Dust Trail

Dark, ethereal purples and soft lavenders that depict a shimmering trail of cosmic dust across the night sky.

darkcalm5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A2E#3E2E5D#6C568E#A08FC1#E5D9EE

Palette guide

How to use Cosmic Dust Trail

Overview

The Cosmic Dust Trail palette depicts a shimmering trail of cosmic dust across the night sky with its dark, ethereal purples and soft lavenders. Ranging from the profound #1A1A2E to the delicate #E5D9EE, this collection is perfect for designers creating calm, mysterious, and visually harmonious digital experiences. It's particularly suitable for sophisticated branding, atmospheric web designs, or applications that aim for a serene yet captivating aesthetic. Developers can integrate these versatile hex codes, such as the rich #6C568E, to build visually compelling applications and websites, ensuring a consistent and enchanting user experience across various digital platforms.

Best used for

Serene meditation apps
Mysterious web backgrounds
Ethereal brand identity
Space-themed digital art
Luxury product showcases
Calm UI/UX design

Suggested color roles

primary

#3E2E5D - A deep, grounding purple that serves as an excellent base for large sections or main content areas.

secondary

#6C568E - A rich mid-tone purple, suitable for secondary information, interactive components, or subtle data visualization.

accent

#A08FC1 - A lighter, soft lavender, ideal for drawing attention to calls to action, highlights, or gentle glow effects.

background

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

text

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

Accessibility notes

Ensure sufficient contrast for text, especially when using #6C568E on #3E2E5D.
Always use #E5D9EE or white for body text on #1A1A2E and #3E2E5D to meet WCAG AA standards.
Be cautious with contrast when layering #A08FC1 over #6C568E for crucial UI elements.
Test interactive elements for adequate contrast to ensure usability for users with visual impairments.

Recommended combinations

Deep Cosmic Glow

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

#1A1A2E · #3E2E5D · #6C568E

Ethereal Highlight

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

#3E2E5D · #A08FC1 · #E5D9EE

Mystic Layers

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

#1A1A2E · #6C568E · #E5D9EE

CSS variables

:root {
  --cosmic-dust-trail-1: #1A1A2E;
  --cosmic-dust-trail-2: #3E2E5D;
  --cosmic-dust-trail-3: #6C568E;
  --cosmic-dust-trail-4: #A08FC1;
  --cosmic-dust-trail-5: #E5D9EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-dust-trail": {
        1: "#1A1A2E",
        2: "#3E2E5D",
        3: "#6C568E",
        4: "#A08FC1",
        5: "#E5D9EE",
      }
    }
  }
}

Hex values

Color 1#1A1A2E

Color 2#3E2E5D

Color 3#6C568E

Color 4#A08FC1

Color 5#E5D9EE

Accessibility

Contrast checker

1.4:1Fail

2.7:1Fail

5.8:1AA

12.6:1AAA

1.4:1Fail

1.9:1Fail

4.1:1AA18

8.8:1AAA

2.7:1Fail

1.9:1Fail

2.1:1Fail

4.6:1AA

5.8:1AA

4.1:1AA18

2.1:1Fail

2.2:1Fail

12.6:1AAA

8.8:1AAA

4.6:1AA

2.2:1Fail

Similar palettes

More like Cosmic Dust Trail