Palette

Lunar Surface Gray

Muted, cool greys reflecting the barren, ethereal landscape of the moon.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A9A9A9#C0C0C0#808080#696969#DCDCDC

Palette guide

How to use Lunar Surface Gray

Overview

The Lunar Surface Gray palette offers a refined monochrome experience, capturing the muted, ethereal landscape of the moon. This collection features a harmonious range of cool greys, from the grounding #696969 and the versatile #808080, to the lighter, airy tones of #A9A9A9, #C0C0C0, and #DCDCDC. It's an excellent choice for designers and developers aiming for clean, minimalist interfaces that exude sophistication and calm. The subtle variations provide depth without visual noise, making it perfect for conveying professionalism, clarity, and a timeless aesthetic in any digital application or branding project.

Best used for

Minimalist web design and user interfaces
Photography portfolio websites
Corporate presentations and reports
High-end fashion or luxury product branding
Architectural visualization projects
Clean data dashboards and analytics platforms

Suggested color roles

primary

Use #808080 as a solid primary for main content areas, headers, or prominent UI components, providing a balanced anchor.

secondary

Apply #A9A9A9 for supportive text, subheadings, or background sections, offering a soft, complementary presence.

accent

Employ #C0C0C0 for subtle highlights, interactive states, or decorative elements, adding a gentle luminosity.

background

Utilize #DCDCDC as a clean, bright background, ensuring excellent readability and a sense of spaciousness.

text

For optimal contrast, use #696969 or a deep charcoal for body text on lighter backgrounds like #DCDCDC or #C0C0C0.

Accessibility notes

Ensure #696969 text on #DCDCDC or #C0C0C0 backgrounds meets WCAG AA contrast requirements.
Avoid using #A9A9A9 or #C0C0C0 for small text on similarly light backgrounds due to low contrast.
Reserve lighter greys like #DCDCDC for large display text or non-critical graphical elements on mid-tone backgrounds.
Test all text and interactive element contrasts across different screen types and accessibility tools for optimal legibility.

Recommended combinations

Clean Horizon

Ideal for a crisp, bright interface with dark text and a mid-grey for secondary information or links.

#DCDCDC · #696969 · #A9A9A9

Subtle Contrast

Effective for cards or panels, using a mid-grey base, bright text, and a lighter grey for subtle accents.

#808080 · #DCDCDC · #C0C0C0

Monochrome Depth

Suitable for a dark-themed section, with a deep base, light text, and a mid-grey for supporting details.

#696969 · #A9A9A9 · #DCDCDC

CSS variables

:root {
  --lunar-surface-gray-1: #A9A9A9;
  --lunar-surface-gray-2: #C0C0C0;
  --lunar-surface-gray-3: #808080;
  --lunar-surface-gray-4: #696969;
  --lunar-surface-gray-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-surface-gray": {
        1: "#A9A9A9",
        2: "#C0C0C0",
        3: "#808080",
        4: "#696969",
        5: "#DCDCDC",
      }
    }
  }
}

Hex values

Color 1#A9A9A9

Color 2#C0C0C0

Color 3#808080

Color 4#696969

Color 5#DCDCDC

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

2.3:1Fail

1.7:1Fail

1.3:1Fail

2.2:1Fail

3:1AA18

1.3:1Fail

1.7:1Fail

2.2:1Fail

1.4:1Fail

2.9:1Fail

2.3:1Fail

3:1AA18

1.4:1Fail

4:1AA18

1.7:1Fail

1.3:1Fail

2.9:1Fail

4:1AA18

Similar palettes

More like Lunar Surface Gray

Lunar Surface Gray

See it in context.

Ready when you are.

Built with Lunar Surface Gray.

How to use Lunar Surface Gray

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Clean Horizon

Subtle Contrast

Monochrome Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Lunar Surface Gray