Palette

Lunar Surface Stone

Stark and quiet shades of moon rock and dust, reflecting the silent, desolate lunar surface.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B8D91#AFB1B5#D2D4D7#4F5257#6D7075

Palette guide

How to use Lunar Surface Stone

Overview

The Lunar Surface Stone palette offers a sophisticated range of cool, muted greys, embodying the stark and quiet beauty of moon rock and dust. Featuring grounding tones like #4F5257 and #6D7075, alongside versatile mid-greys #8B8D91 and #AFB1B5, and the airy #D2D4D7, this collection is perfect for designers and developers seeking a minimal, understated aesthetic. Its subtle variations provide depth and texture without relying on vibrant colors, making it ideal for creating serene, professional, and contemporary digital experiences. This palette conveys a sense of stability, modernity, and quiet strength.

Best used for

Minimalist web and application interfaces
Architectural or industrial design presentations
High-end tech product branding
Corporate and professional service websites
Photography and art gallery platforms
Modern editorial design layouts

Suggested color roles

primary

Use #6D7075 as a strong, versatile primary for main content areas, headers, or key UI elements, providing a stable foundation.

secondary

Apply #8B8D91 for supportive text, subheadings, or secondary navigation, offering a gentle, cool contrast.

accent

Employ #AFB1B5 for subtle highlights, interactive states, or decorative details, adding a touch of understated polish.

background

Utilize #D2D4D7 as a clean, light background, ensuring excellent readability and a spacious, contemporary feel.

text

For optimal contrast, use #4F5257 or a deep charcoal for body text on lighter backgrounds like #D2D4D7 or #AFB1B5.

Accessibility notes

Ensure #4F5257 text on #D2D4D7 or #AFB1B5 backgrounds meets WCAG AA contrast standards.
Avoid using #AFB1B5 on #D2D4D7 for small text or critical information due to potentially low contrast.
Reserve lighter shades like #D2D4D7 for large display text or decorative elements on darker backgrounds.
Test all text and interactive element contrasts rigorously across different devices and user settings.

Recommended combinations

Stone Horizon

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

#D2D4D7 · #4F5257 · #8B8D91

Subtle Rock

Effective for card-based layouts, using a mid-dark base, bright text, and a lighter grey for subtle accents.

#6D7075 · #D2D4D7 · #AFB1B5

Deep Lunar

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

#4F5257 · #AFB1B5 · #8B8D91

CSS variables

:root {
  --lunar-surface-stone-1: #8B8D91;
  --lunar-surface-stone-2: #AFB1B5;
  --lunar-surface-stone-3: #D2D4D7;
  --lunar-surface-stone-4: #4F5257;
  --lunar-surface-stone-5: #6D7075;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-surface-stone": {
        1: "#8B8D91",
        2: "#AFB1B5",
        3: "#D2D4D7",
        4: "#4F5257",
        5: "#6D7075",
      }
    }
  }
}

Hex values

Color 1#8B8D91

Color 2#AFB1B5

Color 3#D2D4D7

Color 4#4F5257

Color 5#6D7075

Accessibility

Contrast checker

1.5:1Fail

2.2:1Fail

2.4:1Fail

1.5:1Fail

1.4:1Fail

3.7:1AA18

2.3:1Fail

2.2:1Fail

1.4:1Fail

5.3:1AA

3.3:1AA18

2.4:1Fail

3.7:1AA18

5.3:1AA

1.6:1Fail

1.5:1Fail

2.3:1Fail

3.3:1AA18

1.6:1Fail

Similar palettes

More like Lunar Surface Stone

Lunar Surface Stone

See it in context.

Ready when you are.

Built with Lunar Surface Stone.

How to use Lunar Surface Stone

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Stone Horizon

Subtle Rock

Deep Lunar

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Lunar Surface Stone