Palette

Celestial Dust Bloom

A spectrum of grays and silvers evoking a clean, sophisticated, and contemporary aesthetic.

MonochromeMinimal5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#424242#757575#BDBDBD#E0E0E0#FFFFFF

Palette guide

How to use Celestial Dust Bloom

Overview

The Celestial Dust Bloom palette offers a refined spectrum of grays and silvers, embodying a clean, sophisticated, and contemporary aesthetic. From the deep #424242 to the versatile #757575 and #BDBDBD, culminating in the bright #E0E0E0 and #FFFFFF, this monochrome collection is ideal for designers and developers seeking a minimalist yet impactful visual language. It provides excellent flexibility for creating sleek interfaces, professional branding, and modern digital experiences that prioritize clarity and understated elegance.

Best used for

Professional corporate websites
Minimalist app interfaces
High-tech product branding
Architectural design portfolios
Editorial layouts for luxury magazines
Modern e-commerce platforms

Suggested color roles

primary

#424242 serves as a strong, grounding color for primary text, headers, or dark mode backgrounds.

secondary

#757575 or #BDBDBD are excellent for secondary text, borders, shadows, or subtle UI elements.

accent

#E0E0E0 can be used for subtle highlights, disabled states, or as a very light background element.

background

#FFFFFF provides a pristine, bright canvas, ensuring maximum readability and a clean aesthetic.

text

For light backgrounds, #424242 or #757575 offer optimal readability. For dark backgrounds, #FFFFFF is ideal.

Accessibility notes

#424242 and #757575 offer good contrast against #FFFFFF for text, meeting WCAG AA standards.
Be cautious when using #BDBDBD for small text on #E0E0E0 or #FFFFFF, as contrast may be insufficient.
Ensure sufficient contrast for interactive elements like buttons and links, especially in hover/focus states.
This palette is excellent for high contrast text options, making it inherently accessible for content.

Recommended combinations

Modern Professional

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

#FFFFFF · #424242 · #757575

Sleek Depth

Ideal for dark mode themes or creating layered visual effects with subtle shifts in tone.

#424242 · #BDBDBD · #E0E0E0

Minimalist Highlight

Use for subtle background variations or highlighting sections without introducing color.

#E0E0E0 · #757575 · #BDBDBD

CSS variables

:root {
  --celestial-dust-bloom-2-1: #424242;
  --celestial-dust-bloom-2-2: #757575;
  --celestial-dust-bloom-2-3: #BDBDBD;
  --celestial-dust-bloom-2-4: #E0E0E0;
  --celestial-dust-bloom-2-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-dust-bloom-2": {
        1: "#424242",
        2: "#757575",
        3: "#BDBDBD",
        4: "#E0E0E0",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#424242

Color 2#757575

Color 3#BDBDBD

Color 4#E0E0E0

Color 5#FFFFFF

Accessibility

Contrast checker

2.2:1Fail

5.3:1AA

7.6:1AAA

10:1AAA

2.2:1Fail

2.5:1Fail

3.5:1AA18

4.6:1AA

5.3:1AA

2.5:1Fail

1.4:1Fail

1.9:1Fail

7.6:1AAA

3.5:1AA18

1.4:1Fail

1.3:1Fail

10:1AAA

4.6:1AA

1.9:1Fail

1.3:1Fail

Similar palettes

More like Celestial Dust Bloom

View all Monochrome

Chrome Reflection

Geometric Noir Still

Minimalist Loft Whites

Urban Concrete Grays

Abstract Urban Canvas

Aged Stone Reverie