Palette

Cosmic Dust

A sophisticated spectrum of deep grays, inspired by the silent, vast expanses of the cosmos.

darkminimal5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#343A40#6C757D#ADB5BD#495057#212529

Palette guide

How to use Cosmic Dust

Overview

The Cosmic Dust palette offers a sophisticated spectrum of deep grays, inspired by the silent, vast expanses of the cosmos. Ranging from the profound #212529 to the lighter #ADB5BD, this collection is perfect for designers creating modern, minimalist, and professional digital experiences. It's particularly suitable for tech-focused branding, dark mode interfaces, or applications that aim for a clean yet intriguing aesthetic. Developers can integrate these versatile hex codes, such as the balanced #495057, to build visually compelling applications and websites, ensuring a consistent and elegant user experience across various digital platforms.

Best used for

Minimalist web design
Professional tech branding
Dark mode UI/UX
Corporate dashboards
Modern architectural portfolios
Sophisticated editorial layouts

Suggested color roles

primary

#343A40 - A deep charcoal that serves as an excellent base for large sections or main content areas.

secondary

#495057 - A balanced mid-tone gray, suitable for secondary information, interactive components, or subtle data visualization.

accent

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

background

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

text

#ADB5BD or white - Provides clear readability and a professional feel against the darker shades within the palette.

Accessibility notes

Ensure sufficient contrast for text, especially when using #495057 on #343A40.
Always use #ADB5BD or white for body text on #212529 and #343A40 to meet WCAG AA standards.
Be cautious with contrast when layering #6C757D over #495057 for crucial UI elements.
Test interactive elements for adequate contrast to ensure usability for users with visual impairments.

Recommended combinations

Deep Space Layers

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

#212529 · #343A40 · #495057

Subtle Highlight

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

#343A40 · #6C757D · #ADB5BD

Cosmic Hierarchy

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

#212529 · #495057 · #6C757D

CSS variables

:root {
  --cosmic-dust-1: #343A40;
  --cosmic-dust-2: #6C757D;
  --cosmic-dust-3: #ADB5BD;
  --cosmic-dust-4: #495057;
  --cosmic-dust-5: #212529;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-dust": {
        1: "#343A40",
        2: "#6C757D",
        3: "#ADB5BD",
        4: "#495057",
        5: "#212529",
      }
    }
  }
}

Hex values

Color 1#343A40

Color 2#6C757D

Color 3#ADB5BD

Color 4#495057

Color 5#212529

Accessibility

Contrast checker

2.5:1Fail

5.5:1AA

1.4:1Fail

1.3:1Fail

2.5:1Fail

2.3:1Fail

1.7:1Fail

3.3:1AA18

5.5:1AA

2.3:1Fail

3.9:1AA18

7.4:1AAA

1.4:1Fail

1.7:1Fail

3.9:1AA18

1.9:1Fail

1.3:1Fail

3.3:1AA18

7.4:1AAA

1.9:1Fail

Similar palettes

More like Cosmic Dust

View all dark

Deep Space

Anthracite Edge

Brutalist Concrete Form

Stellar Dust Motes

Cyber City Dream

Espresso Roast Foam