Palette

Lunar Dust Trail

A serene grayscale path reflecting the gentle, quiet beauty of a moonlit surface.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C9C9CA#A2A2A3#767677#4A4A4B#2D2D2E

Palette guide

How to use Lunar Dust Trail

Overview

The 'Lunar Dust Trail' palette is a serene grayscale path, offering designers and developers a sophisticated monochrome foundation. This collection ranges from the ethereal light grey #C9C9CA to the deep, grounding #2D2D2E, with balanced mid-tones like #A2A2A3 and #767677. Ideal for creating minimalist, modern, and professional designs, it provides subtle variations that add depth without introducing additional hues. Its quiet beauty reflects a moonlit surface, perfect for projects requiring a clean, understated elegance. Use it to build cohesive visual narratives where texture and form take center stage.

Best used for

Corporate branding and identity
Minimalist web and app interfaces
Architectural presentations and renders
Fine art photography portfolios
High-end product packaging
Elegant print materials and stationery

Suggested color roles

primary

Use #4A4A4B as a strong, versatile foundational grey for primary elements, large sections, or prominent backgrounds.

secondary

Employ #767677 for supporting sections, subheadings, or secondary interactive elements to maintain visual hierarchy.

accent

Apply #A2A2A3 sparingly for subtle highlights, delicate borders, or inactive states of UI components.

background

Utilize #C9C9CA for clean, airy main backgrounds, offering a bright and expansive canvas.

text

Set primary body text in #2D2D2E for excellent readability on lighter backgrounds, or use a near-white on darker palette colors.

Accessibility notes

Ensure #2D2D2E text on #C9C9CA or #A2A2A3 backgrounds meets WCAG AA contrast standards.
Avoid using very light shades like #C9C9CA for small text on #A2A2A3 due to potential low contrast.
Always use a contrast checker for all foreground/background pairings, especially for interactive elements and crucial information.
For critical body text on the lightest backgrounds, consider using a darker grey than #2D2D2E if WCAG AAA compliance is a concern.

Recommended combinations

Clean Interface

For a bright, professional UI base with clear element separation and strong visual hierarchy.

#C9C9CA · #A2A2A3 · #4A4A4B

Dark Mode Contrast

Perfect for a sophisticated dark mode, using light text on a deep background with subtle mid-tone accents.

#2D2D2E · #767677 · #C9C9CA

Subtle Depth

Creates a nuanced, layered effect for backgrounds and content blocks where strong contrast isn't the primary goal.

#A2A2A3 · #767677 · #4A4A4B

CSS variables

:root {
  --lunar-dust-trail-2-1: #C9C9CA;
  --lunar-dust-trail-2-2: #A2A2A3;
  --lunar-dust-trail-2-3: #767677;
  --lunar-dust-trail-2-4: #4A4A4B;
  --lunar-dust-trail-2-5: #2D2D2E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-dust-trail-2": {
        1: "#C9C9CA",
        2: "#A2A2A3",
        3: "#767677",
        4: "#4A4A4B",
        5: "#2D2D2E",
      }
    }
  }
}

Hex values

Color 1#C9C9CA

Color 2#A2A2A3

Color 3#767677

Color 4#4A4A4B

Color 5#2D2D2E

Accessibility

Contrast checker

1.5:1Fail

2.7:1Fail

5.3:1AA

8.3:1AAA

1.5:1Fail

1.8:1Fail

3.5:1AA18

5.4:1AA