Palette

Cosmic Dust Shimmer

Deep purples and magenta reflecting the mysterious, sparkling dust clouds of deep space.

vibrantdark5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#191970#483D8B#8A2BE2#C71585#DDA0DD

Palette guide

How to use Cosmic Dust Shimmer

Overview

The Cosmic Dust Shimmer palette offers a vibrant blend of deep purples and magenta, reflecting the mysterious, sparkling dust clouds of deep space. Ranging from the profound #191970 to the delicate #DDA0DD, this collection is perfect for designers creating energetic, mystical, and visually striking digital experiences. It's particularly suitable for bold branding, dynamic event promotions, or applications that seek to convey excitement and wonder. Developers can integrate these versatile hex codes, such as the electric #8A2BE2, to build visually captivating applications and websites, ensuring a consistent and enchanting user experience across various digital platforms.

Best used for

Vibrant event branding
Sci-fi game UI/UX
Mystical digital art
Bold website headers
Youth-oriented applications
Fashion and beauty promotions

Suggested color roles

primary

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

secondary

#8A2BE2 - A vibrant electric purple, suitable for supporting elements, secondary buttons, or dynamic data visualization.

accent

#C71585 - A striking magenta, ideal for drawing attention to calls to action, key highlights, or interactive states.

background

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

text

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

Accessibility notes

Ensure sufficient contrast for text, especially when using #8A2BE2 on #483D8B.
Always use #DDA0DD or white for body text on #191970 and #483D8B to meet WCAG AA standards.
Be cautious with contrast when layering #C71585 over #8A2BE2 for crucial UI elements.
Test interactive elements for adequate contrast to ensure usability for users with visual impairments.

Recommended combinations

Electric Nebula

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

#191970 · #483D8B · #8A2BE2

Vibrant Highlight

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

#483D8B · #C71585 · #DDA0DD

Cosmic Layers

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

#191970 · #8A2BE2 · #DDA0DD

CSS variables

:root {
  --cosmic-dust-shimmer-1: #191970;
  --cosmic-dust-shimmer-2: #483D8B;
  --cosmic-dust-shimmer-3: #8A2BE2;
  --cosmic-dust-shimmer-4: #C71585;
  --cosmic-dust-shimmer-5: #DDA0DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-dust-shimmer": {
        1: "#191970",
        2: "#483D8B",
        3: "#8A2BE2",
        4: "#C71585",
        5: "#DDA0DD",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#483D8B

Color 3#8A2BE2

Color 4#C71585

Color 5#DDA0DD

Accessibility

Contrast checker

1.6:1Fail

2.5:1Fail

2.7:1Fail

7.2:1AAA

1.6:1Fail

1.5:1Fail

1.7:1Fail

4.4:1AA18

2.5:1Fail

1.5:1Fail

1.1:1Fail

2.9:1Fail

2.7:1Fail

1.7:1Fail

1.1:1Fail

2.6:1Fail

7.2:1AAA

4.4:1AA18

2.9:1Fail

2.6:1Fail

Similar palettes

More like Cosmic Dust Shimmer

View all vibrant

Celestial Nebula Glow