Palette

Celestial Dust Trail

Whispers of cosmic light and distant nebulae, creating a serene and otherworldly aura.

PastelCalm5 colors

More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8A2BE2#483D8B#DDA0DD#ADD8E6#E6E6FA

Palette guide

How to use Celestial Dust Trail

Overview

The Celestial Dust Trail palette whispers of cosmic light and distant nebulae, creating a serene and otherworldly aura. Featuring the vibrant #8A2BE2 and deep #483D8B, it transitions to the soft #DDA0DD, airy #ADD8E6, and luminous #E6E6FA. This pastel collection is perfect for designers and developers aiming to craft dreamy, mystical, and gentle digital experiences, branding, or interfaces. Its harmonious blend of purples and blues offers versatility for creating captivating visuals that evoke wonder and tranquility, ideal for a calm aesthetic.

Best used for

Dreamy wedding or event branding
Spiritual and mindfulness apps
Fantasy-themed digital art
Ethereal beauty product packaging
Children's book illustrations
Soft UI for lifestyle blogs

Suggested color roles

primary

#8A2BE2 or #483D8B serve as vibrant or deep anchors for headers, footers, or impactful graphic elements.

secondary

#DDA0DD or #ADD8E6 can be used for secondary content areas, card backgrounds, or navigation, providing a softer contrast.

accent

#E6E6FA provides a pristine, luminous highlight, perfect for delicate elements, hover states, or subtle background patterns.

background

#E6E6FA offers a very light, almost white-lilac canvas, ideal for clean and spacious layouts.

text

For light backgrounds, a dark charcoal or black is essential for optimal readability. For darker elements, #E6E6FA provides clear contrast.

Accessibility notes

#8A2BE2 and #483D8B offer good contrast for text on #E6E6FA, meeting WCAG AA standards.
Avoid using #DDA0DD or #ADD8E6 for body text on #E6E6FA due to potential low contrast; reserve for larger titles.
Ensure interactive elements have clear visual states, as some colors are close in luminance.
Consider using a darker primary text color like charcoal on #E6E6FA for maximum readability.

Recommended combinations

Mystic Dawn

A vibrant focal point on a light background with a deep complementary accent.

#8A2BE2 · #E6E6FA · #483D8B

Ethereal Blend

Ideal for subtle background gradients or soft, layered UI elements.

#DDA0DD · #ADD8E6 · #E6E6FA

Calm Interface

A clean and readable setup for content-heavy applications requiring a gentle aesthetic.

#E6E6FA · #483D8B · #DDA0DD

CSS variables

:root {
  --celestial-dust-trail-2-1: #8A2BE2;
  --celestial-dust-trail-2-2: #483D8B;
  --celestial-dust-trail-2-3: #DDA0DD;
  --celestial-dust-trail-2-4: #ADD8E6;
  --celestial-dust-trail-2-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-dust-trail-2": {
        1: "#8A2BE2",
        2: "#483D8B",
        3: "#DDA0DD",
        4: "#ADD8E6",
        5: "#E6E6FA",
      }
    }
  }
}

Hex values

Color 1#8A2BE2

Color 2#483D8B

Color 3#DDA0DD

Color 4#ADD8E6

Color 5#E6E6FA

Accessibility

Contrast checker

1.5:1Fail

2.9:1Fail

3.9:1AA18

4.8:1AA

1.5:1Fail

4.4:1AA18

5.9:1AA

7.4:1AAA

2.9:1Fail

4.4:1AA18

1.4:1Fail

1.7:1Fail

3.9:1AA18

5.9:1AA

1.4:1Fail

1.2:1Fail

4.8:1AA

7.4:1AAA

1.7:1Fail

1.2:1Fail

Similar palettes

More like Celestial Dust Trail