Palette

Lunar Surface Chill

Cool, stark grays that reflect the desolate beauty and chilling silence of the lunar landscape.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lunar Surface Chill 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 Surface Chill.

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

Data visualization

#4A4A4A#7D7D7D#B3B3B3#E0E0E0#2E2E2E

Palette guide

How to use Lunar Surface Chill

Overview

The Lunar Surface Chill palette presents a sophisticated monochrome range, capturing the stark, serene beauty of the moon's surface. Featuring deep charcoal #2E2E2E, balanced mid-tones like #4A4A4A and #7D7D7D, and bright, airy greys such as #B3B3B3 and #E0E0E0, this collection is perfect for designers and developers seeking a clean, minimalist aesthetic. Its cool, desaturated tones provide a timeless foundation for interfaces that prioritize clarity, professionalism, and a quiet strength. The versatility of these greys allows for elegant layering and subtle distinction without relying on vibrant hues, ensuring a refined user experience.

Best used for

Corporate websites and professional portfolios
Minimalist mobile application design
Photography or art gallery websites
High-tech product showcases
Data visualization dashboards
Clean and modern editorial layouts

Suggested color roles

primary

Utilize #4A4A4A as a strong, versatile primary for main content areas, headers, or prominent UI elements, providing a balanced anchor.

secondary

Apply #7D7D7D for supportive information, secondary navigation, or subtle dividers, offering a gentle contrast.

accent

Employ #B3B3B3 to subtly highlight interactive states, icons, or secondary calls-to-action, adding a touch of luminosity.

background

Use #E0E0E0 as a light, clean background for most content, ensuring excellent readability and a spacious feel.

text

For optimal contrast, use #2E2E2E or #4A4A4A for body text on lighter backgrounds like #E0E0E0 or #B3B3B3.

Accessibility notes

Ensure #2E2E2E or #4A4A4A text on #E0E0E0 backgrounds meets WCAG AA contrast standards.
Avoid low-contrast pairings such as #7D7D7D on #B3B3B3 for small text or critical information.
Use lighter greys like #B3B3B3 for large headlines or decorative elements rather than body text on mid-tone backgrounds.
Regularly test contrast ratios for all text and interactive elements, especially for users with visual impairments.

Recommended combinations

Classic Elegance

A timeless combination for clear content presentation: light background, dark text, and a mid-tone for emphasis.

#E0E0E0 · #2E2E2E · #7D7D7D

Subtle Depth

Effective for card-based layouts, with a darker base, light text, and a bright accent for hover states.

#4A4A4A · #E0E0E0 · #B3B3B3

Monochrome Focus

Ideal for dark mode, providing a deep background, bright text, and a secondary mid-tone for supporting details.

#2E2E2E · #B3B3B3 · #7D7D7D

CSS variables

:root {
  --lunar-surface-chill-1: #4A4A4A;
  --lunar-surface-chill-2: #7D7D7D;
  --lunar-surface-chill-3: #B3B3B3;
  --lunar-surface-chill-4: #E0E0E0;
  --lunar-surface-chill-5: #2E2E2E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-surface-chill": {
        1: "#4A4A4A",
        2: "#7D7D7D",
        3: "#B3B3B3",
        4: "#E0E0E0",
        5: "#2E2E2E",
      }
    }
  }
}

Hex values

Color 1#4A4A4A

Color 2#7D7D7D

Color 3#B3B3B3

Color 4#E0E0E0

Color 5#2E2E2E

Accessibility

Contrast checker

2.2:1Fail

4.2:1AA18

6.7:1AA

1.5:1Fail

2.2:1Fail

2:1Fail

3.1:1AA18

3.3:1AA18

4.2:1AA18

2:1Fail

1.6:1Fail

6.5:1AA

6.7:1AA

3.1:1AA18

1.6:1Fail

10.3:1AAA

1.5:1Fail

3.3:1AA18

6.5:1AA

10.3:1AAA

Similar palettes

More like Lunar Surface Chill