Back to palettes

Palette

Celestial Moon Dust

A subtle, ethereal palette evoking the powdery, quiet surface of the moon and distant stardust.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D3D3D3#E0E0E0#F0F0F0#F8F8F8#C0C0C0

Palette guide

How to use Celestial Moon Dust

Overview

The Celestial Moon Dust palette offers a subtle, ethereal spectrum of grays, evoking the powdery, quiet surface of the moon and distant stardust. Ranging from the slightly deeper #C0C0C0 to the very light #F8F8F8, with harmonious intermediate shades like #D3D3D3, #E0E0E0, and #F0F0F0, this collection exudes a minimal and calm aura. It's ideal for designers and developers looking to create clean, sophisticated, and serene digital experiences, branding, or interfaces that prioritize clarity and understated elegance, with a lunar touch.

Best used for

  • Minimalist corporate websites
  • High-tech product interfaces
  • Luxury real estate branding
  • Clean editorial designs
  • Modern art gallery platforms
  • Lunar or space-themed educational content

Suggested color roles

primary

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

secondary

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

accent

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

background

#F8F8F8 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, #F8F8F8 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, as contrast will be insufficient.
  • #C0C0C0 offers slightly better contrast for larger headings or graphic elements when paired with #F8F8F8.
  • Consider larger font sizes for any text rendered in the lighter palette colors to improve readability.

Recommended combinations

Lunar Clean

A classic, high-contrast combination for readable content and a clear accent.

#F8F8F8 · #C0C0C0 · #D3D3D3

Subtle Layers

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

#D3D3D3 · #E0E0E0 · #F0F0F0

Minimalist Moon

Use #F8F8F8 as a main background, with #C0C0C0 for main text and #D3D3D3 for secondary elements.

#F8F8F8 · #C0C0C0 · #D3D3D3

CSS variables

:root {
  --celestial-moon-dust-1: #D3D3D3;
  --celestial-moon-dust-2: #E0E0E0;
  --celestial-moon-dust-3: #F0F0F0;
  --celestial-moon-dust-4: #F8F8F8;
  --celestial-moon-dust-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-moon-dust": {
        1: "#D3D3D3",
        2: "#E0E0E0",
        3: "#F0F0F0",
        4: "#F8F8F8",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

minimalist grey palettelunar UI designsubtle space brandingclean white grey web designmoon dust color scheme

Palette colors

Hex values

Color 1#D3D3D3
·
Color 2#E0E0E0
·
Color 3#F0F0F0
·
Color 4#F8F8F8
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.4:1Fail
1.2:1Fail
2
1.1:1Fail
1.2:1Fail
1.2:1Fail
1.4:1Fail
3
1.3:1Fail
1.2:1Fail
1.1:1Fail
1.6:1Fail
4
1.4:1Fail
1.2:1Fail
1.1:1Fail
1.7:1Fail
5
1.2:1Fail
1.4:1Fail
1.6:1Fail
1.7:1Fail

Similar palettes

More like Celestial Moon Dust

View all monochrome
Lunar Crater Surface
Lunar Dust Veil
Lunar Dust Voyage
Lunar Crater Dust
Lunar Dust Trail
Lunar Dust Veil