Palette

Cosmic Dark Dust

A minimalist range of greys, reminiscent of cosmic dust swirling in a distant nebula.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A0A#2F2F2F#545454#797979#9E9E9E

Palette guide

How to use Cosmic Dark Dust

Overview

The Cosmic Dark Dust palette offers a minimalist and sophisticated range of greys, from the profound #0A0A0A to the lighter #9E9E9E. This monochrome collection beautifully evokes cosmic dust swirling in a distant nebula, providing a dark yet elegant aesthetic. Designers can leverage these subtle tonal variations to create clean, modern interfaces that convey depth and sophistication without overwhelming the user. Developers will find these hex codes ideal for crafting sleek digital experiences, from elegant dark mode themes to professional website designs, ensuring visual harmony and a refined user journey across various digital platforms with a touch of cosmic mystery.

Best used for

Minimalist website design and branding
Dark mode UI/UX for professional applications
Photography portfolios with a moody aesthetic
Luxury brand identity with understated elegance
Technical documentation or developer tools interfaces
Abstract art and monochrome illustrations

Suggested color roles

primary

Utilize #0A0A0A as a profound primary, ideal for main backgrounds, commanding headers, or foundational brand elements.

secondary

Employ #2F2F2F as a rich secondary, excellent for subheadings, navigation, or larger background sections to add subtle depth.

accent

Apply #545454 as a gentle accent, perfect for subtle highlights, interactive elements, or small details that need to stand out softly.

background

The deep #0A0A0A provides an immersive dark canvas. Alternatively, #9E9E9E can serve as a lighter background for contrast.

text

White or a very light gray provides excellent contrast on #0A0A0A, #2F2F2F, and #545454. Use #0A0A0A for text on #9E9E9E.

Accessibility notes

Ensure white text on #0A0A0A, #2F2F2F, and #545454 meets WCAG AA contrast standards for readability.
Avoid pairing #797979 and #9E9E9E for small text due to their close values and potential low contrast; reserve for larger graphics.
The lighter shades like #797979 and #9E9E9E work well for subtle glow effects or as backgrounds for darker text.
For body text on #9E9E9E, consider using #0A0A0A or #2F2F2F for better legibility than a standard black.

Recommended combinations

Dusty Depth

Combine the darkest shades for a profound background with the lightest for striking text or key UI elements.

#0A0A0A · #2F2F2F · #9E9E9E

Monochrome Flow

Create smooth gradients or layered effects in UI design, mimicking the subtle shifts of cosmic dust clouds.

#2F2F2F · #545454 · #797979

Subtle Contrast

Use #9E9E9E as a light background, #0A0A0A for primary text, and #545454 for secondary information or subtle accents.

#9E9E9E · #0A0A0A · #545454

CSS variables

:root {
  --cosmic-dark-dust-1: #0A0A0A;
  --cosmic-dark-dust-2: #2F2F2F;
  --cosmic-dark-dust-3: #545454;
  --cosmic-dark-dust-4: #797979;
  --cosmic-dark-dust-5: #9E9E9E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-dark-dust": {
        1: "#0A0A0A",
        2: "#2F2F2F",
        3: "#545454",
        4: "#797979",
        5: "#9E9E9E",
      }
    }
  }
}

Hex values

Color 1#0A0A0A

Color 2#2F2F2F

Color 3#545454

Color 4#797979

Color 5#9E9E9E

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

4.5:1AA

7.4:1AAA

1.5:1Fail

1.8:1Fail

3.1:1AA18

5:1AA

2.6:1Fail

1.8:1Fail

1.7:1Fail

2.8:1Fail

4.5:1AA

3.1:1AA18

1.7:1Fail

1.6:1Fail

7.4:1AAA

5:1AA

2.8:1Fail

1.6:1Fail

Similar palettes

More like Cosmic Dark Dust

View all monochrome

Basalt Column Grey

Galactic Void Glimmer