Palette

Cosmic Dust Shimmer

Glimmering specks of light against the deep cosmic void, a universe of silent wonders.

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

#1A1A2E#3C3B5E#6C6BA7#A1A0D6#EDECEB

Palette guide

How to use Cosmic Dust Shimmer

Overview

The Cosmic Dust Shimmer palette evokes glimmering specks of light against the deep cosmic void, a universe of silent wonders. Ranging from the profound #1A1A2E to the soft almost white #EDECEB, this collection is perfect for designers creating sophisticated, dark, and subtly luminous digital experiences. It's particularly suitable for minimalist dark mode interfaces, elegant branding, or applications that seek to convey mystery and depth with a touch of celestial shimmer. Developers can integrate these nuanced hex codes, such as the rich #6C6BA7, to build visually compelling applications and websites, ensuring a consistent and enchanting user experience that balances darkness with subtle highlights.

Best used for

Minimalist dark mode UI
Elegant tech branding
Space-themed photography
Abstract digital art
Sophisticated web design
Luxury product presentations

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

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

Recommended combinations

Cosmic Depth

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

#1A1A2E · #3C3B5E · #6C6BA7

Subtle Shimmer

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

#3C3B5E · #A1A0D6 · #EDECEB

Galaxy Contrast

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

#1A1A2E · #6C6BA7 · #EDECEB

CSS variables

:root {
  --cosmic-dust-shimmer-5-1: #1A1A2E;
  --cosmic-dust-shimmer-5-2: #3C3B5E;
  --cosmic-dust-shimmer-5-3: #6C6BA7;
  --cosmic-dust-shimmer-5-4: #A1A0D6;
  --cosmic-dust-shimmer-5-5: #EDECEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-dust-shimmer-5": {
        1: "#1A1A2E",
        2: "#3C3B5E",
        3: "#6C6BA7",
        4: "#A1A0D6",
        5: "#EDECEB",
      }
    }
  }
}

Hex values

Color 1#1A1A2E

Color 2#3C3B5E

Color 3#6C6BA7

Color 4#A1A0D6

Color 5#EDECEB

Accessibility

Contrast checker

1.6:1Fail

3.5:1AA18

6.9:1AA

14.5:1AAA

1.6:1Fail

2.2:1Fail

4.3:1AA18

9:1AAA

3.5:1AA18

2.2:1Fail

2:1Fail

4.1:1AA18

6.9:1AA

4.3:1AA18

2:1Fail

2.1:1Fail

14.5:1AAA

9:1AAA

4.1:1AA18

2.1:1Fail

Similar palettes

More like Cosmic Dust Shimmer

View all dark

Celestial Shimmer Glow

Cosmic Dreamscape Dust