Palette

Lunar Surface Craters

The stark, desolate beauty of the moon's surface, depicted through cool grays and pale tones of craters and dust.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#808080#A9A9A9#D3D3D3#B0C4DE#696969

Palette guide

How to use Lunar Surface Craters

Overview

The Lunar Surface Craters palette delivers a cool, stark aesthetic inspired by the moon's desolate beauty. It features a range of sophisticated greys, from the deep #696969 to the light #D3D3D3, alongside the unique blue-grey #B0C4DE, and balanced mid-tones like #808080 and #A9A9A9. This collection is ideal for designers and developers crafting minimalist interfaces that require a sense of calm, precision, and understated elegance. The subtle inclusion of the desaturated blue hue adds a touch of ethereal depth, making it versatile for projects seeking a refined, modern, and quietly impactful visual identity.

Best used for

Scientific research platforms or educational tools
Modern art portfolios or digital galleries
Minimalist e-commerce sites for tech or luxury goods
Architectural and interior design presentations
Abstract or conceptual art installations
Sophisticated branding for innovative startups

Suggested color roles

primary

Use #808080 as a stable primary for main content blocks, navigation, or strong graphical elements, providing a cool foundation.

secondary

Apply #A9A9A9 for supportive text, subheadings, or background sections, offering a gentle, unobtrusive presence.

accent

Employ #B0C4DE to introduce a subtle, ethereal accent for interactive elements, highlights, or decorative details.

background

Utilize #D3D3D3 as a clean, light background, ensuring excellent readability and a spacious, airy feel.

text

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

Accessibility notes

Ensure #696969 text on #D3D3D3 or #A9A9A9 backgrounds meets WCAG AA contrast ratios.
Be cautious when pairing #A9A9A9 and #B0C4DE for text due to potentially low contrast.
Reserve lighter shades like #D3D3D3 for large display text or decorative elements on mid-tone backgrounds.
Test all color combinations across various devices and lighting conditions to confirm legibility.

Recommended combinations

Crater Depth

Ideal for dark-themed sections, with a deep base, bright text, and a cool blue-grey accent for highlights.

#696969 · #D3D3D3 · #B0C4DE

Lunar Light

Excellent for a clean, light interface, using a pale background, primary text, and a mid-grey for secondary information.

#D3D3D3 · #808080 · #A9A9A9

Subtle Blue

Effective for cards or panels, with a mid-grey base, blue-grey accent for headers, and a lighter grey for body text.

#808080 · #B0C4DE · #A9A9A9

CSS variables

:root {
  --lunar-surface-craters-1: #808080;
  --lunar-surface-craters-2: #A9A9A9;
  --lunar-surface-craters-3: #D3D3D3;
  --lunar-surface-craters-4: #B0C4DE;
  --lunar-surface-craters-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-surface-craters": {
        1: "#808080",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#B0C4DE",
        5: "#696969",
      }
    }
  }
}

Hex values

Color 1#808080

Color 2#A9A9A9

Color 3#D3D3D3

Color 4#B0C4DE

Color 5#696969

Accessibility

Contrast checker

1.7:1Fail

2.6:1Fail

2.2:1Fail

1.4:1Fail

1.7:1Fail

1.6:1Fail

1.3:1Fail

2.3:1Fail

2.6:1Fail

1.6:1Fail

1.2:1Fail

3.7:1AA18