Palette

Cosmic Dust Trails

A deep, enigmatic blend of interstellar dust and stardust, creating a mysterious and vast cosmic vista.

darkdark5 colors

More dark 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

#0A0A0A#1C0A28#3A2B5B#6D5C8A#A99FBC

Palette guide

How to use Cosmic Dust Trails

Overview

The Cosmic Dust Trails palette offers a deep, enigmatic blend of interstellar dust and stardust, creating a mysterious and vast cosmic vista. Ranging from the profound #0A0A0A to the soft #A99FBC, this collection is perfect for designers creating dark, sophisticated, and subtly mystical digital experiences. It's particularly suitable for minimalist dark mode interfaces, abstract art, or branding that seeks to convey depth and introspection. Developers can integrate these nuanced hex codes, such as the rich #3A2B5B, to build visually compelling applications and websites, ensuring a consistent and enigmatic user experience that balances darkness with subtle luminosity.

Best used for

Minimalist dark mode UI
Abstract digital art
Mysterious brand identity
Ethereal photography showcases
Conceptual website designs
Sci-fi game aesthetics

Suggested color roles

primary

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

secondary

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

accent

#6D5C8A - A lighter, more luminous purple, ideal for drawing attention to calls to action, highlights, or subtle glow effects.

background

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

text

#A99FBC 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 #3A2B5B on #1C0A28.
Always use #A99FBC or white for body text on #0A0A0A and #1C0A28 to meet WCAG AA standards.
Be cautious with contrast when layering #6D5C8A over #3A2B5B for crucial UI elements.
Test interactive elements for adequate contrast to ensure usability for users with visual impairments.

Recommended combinations

Interstellar Depth

Creates a layered, atmospheric background perfect for conveying depth and mystery in digital interfaces or art.

#0A0A0A · #1C0A28 · #3A2B5B

Subtle Stardust

Ideal for highlighting key information or interactive elements, providing a soft, ethereal shimmer.

#1C0A28 · #6D5C8A · #A99FBC

Cosmic Contrast

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

#0A0A0A · #3A2B5B · #A99FBC

CSS variables

:root {
  --cosmic-dust-trails-2-1: #0A0A0A;
  --cosmic-dust-trails-2-2: #1C0A28;
  --cosmic-dust-trails-2-3: #3A2B5B;
  --cosmic-dust-trails-2-4: #6D5C8A;
  --cosmic-dust-trails-2-5: #A99FBC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-dust-trails-2": {
        1: "#0A0A0A",
        2: "#1C0A28",
        3: "#3A2B5B",
        4: "#6D5C8A",
        5: "#A99FBC",
      }
    }
  }
}

Hex values

Color 1#0A0A0A

Color 2#1C0A28

Color 3#3A2B5B

Color 4#6D5C8A

Color 5#A99FBC

Accessibility

Contrast checker

1.1:1Fail

1.6:1Fail

3.3:1AA18

7.9:1AAA

1.1:1Fail

1.5:1Fail

3.2:1AA18

7.5:1AAA

1.6:1Fail

1.5:1Fail

2.1:1Fail

5:1AA

3.3:1AA18

3.2:1AA18

2.1:1Fail

2.4:1Fail

7.9:1AAA

7.5:1AAA

5:1AA

2.4:1Fail

Similar palettes

More like Cosmic Dust Trails

View all dark

Astral Dust Whisper

Celestial Shimmer Glow

Cosmic Cloud Veil

Cosmic Dreamscape Dust

Cosmic Stardust Drift

Cosmic Vapour Trails