Palette

Celestial Dust

Soft, silvery greys and muted blues reflecting the quiet shimmer of stardust and cosmic expanse.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A5A9B6#C1C6D0#DFE4EC#8C919D#B3B8C4

Palette guide

How to use Celestial Dust

Overview

The Celestial Dust palette offers soft, silvery greys and muted blues, reflecting the quiet shimmer of stardust and cosmic expanse. Ranging from the slightly deeper #8C919D to the very light #DFE4EC, with harmonious intermediate shades like #A5A9B6, #B3B8C4, and #C1C6D0, this collection exudes a calm and gentle aura. It's ideal for designers and developers looking to create minimalist, clean, and ethereal digital experiences, branding, or interfaces that evoke subtle sophistication and a sense of vast, open space. Its neutral yet nuanced tones provide excellent versatility.

Best used for

Minimalist corporate websites
High-tech product interfaces
Luxury real estate branding
Clean editorial designs
Modern art gallery platforms
E-commerce for sleek electronics

Suggested color roles

primary

#8C919D serves as a grounding color for main sections, headers, or subtle graphic elements, providing a refined base.

secondary

#A5A9B6 or #B3B8C4 are excellent for secondary content areas, card backgrounds, or navigation, adding gentle depth.

accent

#DFE4EC provides a very light, airy highlight, perfect for delicate elements, hover states, or subtle background patterns.

background

#DFE4EC offers a pristine, almost white-gray canvas, ideal for clean and spacious layouts.

text

A dark charcoal or black is essential for optimal readability on these light backgrounds. For darker elements, #DFE4EC provides clear contrast.

Accessibility notes

Most colors are very light, so ensure text contrast is met by using dark text like black or charcoal.
Avoid using light text colors on any of these grays and blues, as contrast will be insufficient.
#8C919D offers slightly better contrast for larger headings or graphic elements when paired with #DFE4EC.
Consider larger font sizes for any text rendered in the lighter palette colors to improve readability.

Recommended combinations

Clean Cosmos

A classic, high-contrast combination for clean and readable interfaces.

#DFE4EC · #8C919D · #A5A9B6

Subtle Layers

Ideal for creating soft gradients or distinct sections in a subtle, harmonious way.

#A5A9B6 · #B3B8C4 · #C1C6D0

Ethereal Base

Use #DFE4EC as a main background, with #8C919D for main text and #B3B8C4 for secondary elements.

#DFE4EC · #8C919D · #B3B8C4

CSS variables

:root {
  --celestial-dust-1: #A5A9B6;
  --celestial-dust-2: #C1C6D0;
  --celestial-dust-3: #DFE4EC;
  --celestial-dust-4: #8C919D;
  --celestial-dust-5: #B3B8C4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-dust": {
        1: "#A5A9B6",
        2: "#C1C6D0",
        3: "#DFE4EC",
        4: "#8C919D",
        5: "#B3B8C4",
      }
    }
  }
}

Hex values

Color 1#A5A9B6

Color 2#C1C6D0

Color 3#DFE4EC

Color 4#8C919D

Color 5#B3B8C4

Accessibility

Contrast checker

1.4:1Fail

1.8:1Fail

1.3:1Fail

1.2:1Fail

1.4:1Fail

1.3:1Fail

1.8:1Fail

1.2:1Fail

1.8:1Fail

1.3:1Fail

2.5:1Fail

1.6:1Fail

1.3:1Fail

1.8:1Fail

2.5:1Fail

1.6:1Fail

1.2:1Fail

1.6:1Fail

Similar palettes

More like Celestial Dust

Celestial Dust

See it in context.

Ready when you are.

Built with Celestial Dust.

How to use Celestial Dust

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Clean Cosmos

Subtle Layers

Ethereal Base

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Celestial Dust