Palette

Cosmic Dust Shimmer

An ethereal blend of deep purples and grays, capturing the shimmering mystery of cosmic dust clouds.

darkdark5 colors

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

#181326#3D2C4D#6B4E7A#A67ABA#DCCEE5

Palette guide

How to use Cosmic Dust Shimmer

Overview

The Cosmic Dust Shimmer palette captures the ethereal mystery of deep purples and grays, like shimmering cosmic dust clouds. Ranging from the profound #181326 to the delicate #DCCEE5, this collection is perfect for designers creating sophisticated, atmospheric, and slightly melancholic digital experiences. It's particularly suitable for 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 #6B4E7A, to build visually compelling applications and websites, ensuring a consistent and enchanting user experience that balances mystery with subtle luminosity.

Best used for

Dark mode UI/UX design
Abstract digital art
Mysterious brand identity
Ethereal photography showcases
Conceptual website designs
Sci-fi game aesthetics

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

#DCCEE5 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 #6B4E7A on #3D2C4D.
Always use #DCCEE5 or white for body text on #181326 and #3D2C4D to meet WCAG AA standards.
Be cautious with contrast when layering #A67ABA over #6B4E7A for crucial UI elements.
Test interactive elements for adequate contrast to ensure usability for users with visual impairments.

Recommended combinations

Nebula Depth

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

#181326 · #3D2C4D · #6B4E7A

Subtle Glow

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

#3D2C4D · #A67ABA · #DCCEE5

Mystic Contrast

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

#181326 · #6B4E7A · #DCCEE5

CSS variables

:root {
  --cosmic-dust-shimmer-4-1: #181326;
  --cosmic-dust-shimmer-4-2: #3D2C4D;
  --cosmic-dust-shimmer-4-3: #6B4E7A;
  --cosmic-dust-shimmer-4-4: #A67ABA;
  --cosmic-dust-shimmer-4-5: #DCCEE5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-dust-shimmer-4": {
        1: "#181326",
        2: "#3D2C4D",
        3: "#6B4E7A",
        4: "#A67ABA",
        5: "#DCCEE5",
      }
    }
  }
}

Hex values

Color 1#181326

Color 2#3D2C4D

Color 3#6B4E7A

Color 4#A67ABA

Color 5#DCCEE5

Accessibility

Contrast checker

1.4:1Fail

2.6:1Fail

5.3:1AA

12.1:1AAA

1.4:1Fail

1.8:1Fail

3.7:1AA18

8.4:1AAA

2.6:1Fail

1.8:1Fail

2:1Fail

4.7:1AA

5.3:1AA

3.7:1AA18

2:1Fail

2.3:1Fail

12.1:1AAA

8.4:1AAA

4.7:1AA

2.3:1Fail

Similar palettes

More like Cosmic Dust Shimmer