Palette

Cosmic Dust Trail

A celestial path of deep blues and purples, mirroring a stardust trail in the cosmos.

CoolElegant5 colors

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

#483D8B#6A5ACD#7B68EE#9370DB#ADD8E6

Palette guide

How to use Cosmic Dust Trail

Overview

The Cosmic Dust Trail palette offers a celestial path of deep blues and purples, mirroring a stardust trail in the cosmos. Ranging from the profound #483D8B to the soft #ADD8E6, this collection is perfect for designers creating elegant, mystical, and visually harmonious digital experiences. It's particularly suitable for high-end branding, artistic web designs, or applications that aim for a sophisticated yet enchanting aesthetic. Developers can integrate these versatile hex codes, such as the rich #7B68EE, to build visually compelling applications and websites, ensuring a consistent and captivating user experience across various digital platforms.

Best used for

Elegant luxury branding
Artistic web portfolios
Mystical digital illustrations
High-end product showcases
Ethereal event invitations
Science fiction concept art

Suggested color roles

primary

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

secondary

#6A5ACD - A vibrant mid-tone purple-blue, suitable for supporting elements, secondary buttons, or data visualization.

accent

#9370DB - A luminous, softer purple, ideal for drawing attention to calls to action, highlights, or subtle glow effects.

background

#483D8B - The deepest, most foundational color, perfect for immersive dark backgrounds that allow lighter elements to glow.

text

#ADD8E6 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 #6A5ACD on #483D8B.
Always use #ADD8E6 or white for body text on #483D8B and #6A5ACD to meet WCAG AA standards.
Be cautious with contrast when layering #9370DB over #7B68EE for crucial UI elements.
Test interactive elements for adequate contrast to ensure usability for users with visual impairments.

Recommended combinations

Celestial Gradient

Creates a smooth, ethereal transition for backgrounds or atmospheric visual elements.

#483D8B · #6A5ACD · #7B68EE

Stardust Highlight

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

#6A5ACD · #9370DB · #ADD8E6

Mystic Layers

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

#483D8B · #7B68EE · #ADD8E6

CSS variables

:root {
  --cosmic-dust-trail-4-1: #483D8B;
  --cosmic-dust-trail-4-2: #6A5ACD;
  --cosmic-dust-trail-4-3: #7B68EE;
  --cosmic-dust-trail-4-4: #9370DB;
  --cosmic-dust-trail-4-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-dust-trail-4": {
        1: "#483D8B",
        2: "#6A5ACD",
        3: "#7B68EE",
        4: "#9370DB",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#483D8B

Color 2#6A5ACD

Color 3#7B68EE

Color 4#9370DB

Color 5#ADD8E6

Accessibility

Contrast checker

1.7:1Fail

2.2:1Fail

2.4:1Fail

5.9:1AA

1.7:1Fail

1.3:1Fail

1.4:1Fail

3.5:1AA18

2.2:1Fail

1.3:1Fail

1.1:1Fail

2.7:1Fail

2.4:1Fail

1.4:1Fail

1.1:1Fail

2.5:1Fail

5.9:1AA

3.5:1AA18

2.7:1Fail

2.5:1Fail

Similar palettes

More like Cosmic Dust Trail