Back to palettes

Palette

Lunar Surface

A stark range of greys, inspired by the desolate, ethereal beauty and subtle textures of lunar rocks.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7D7D7D#B3B3B3#D9D9D9#6A6A6A#9E9E9E

Palette guide

How to use Lunar Surface

Overview

The Lunar Surface palette offers a stark, yet ethereal range of greys, perfectly capturing the desolate beauty and subtle textures of lunar rocks. From the deep #6A6A6A to the bright #D9D9D9, including the versatile #7D7D7D, #B3B3B3, and #9E9E9E, this monochromatic collection is ideal for designers and developers seeking a clean, minimalist aesthetic. It provides a robust foundation for interfaces that prioritize clarity, professionalism, and a timeless appeal. The subtle variations in tone allow for effective visual hierarchy and depth, ensuring a sophisticated and uncluttered user experience across various digital applications.

Best used for

  • Minimalist website and mobile application design
  • High-tech product showcases and interfaces
  • Architectural visualization and portfolios
  • Corporate branding and professional reports
  • Photography and art gallery websites
  • Clean data dashboards and analytics platforms

Suggested color roles

primary

Use #7D7D7D as a strong, versatile primary for main content areas, headers, or prominent UI elements, providing a balanced anchor.

secondary

Apply #9E9E9E for supportive text, subheadings, or secondary navigation, offering a soft, complementary presence.

accent

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

background

Utilize #D9D9D9 as a clean, bright background, ensuring excellent readability and a spacious, contemporary feel.

text

For optimal contrast, use #6A6A6A or a deep charcoal for body text on lighter backgrounds like #D9D9D9 or #B3B3B3.

Accessibility notes

  • Ensure #6A6A6A text on #D9D9D9 or #B3B3B3 backgrounds meets WCAG AA contrast standards.
  • Avoid using #9E9E9E or #B3B3B3 for small text on similarly light backgrounds due to low contrast.
  • Reserve lighter greys like #D9D9D9 for large display text or non-critical graphical elements on darker backgrounds.
  • Test all text and interactive element contrasts rigorously across different devices and user settings for optimal legibility.

Recommended combinations

Clean Rock

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

#D9D9D9 · #6A6A6A · #9E9E9E

Subtle Lunar

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

#7D7D7D · #D9D9D9 · #B3B3B3

Deep Surface

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

#6A6A6A · #B3B3B3 · #7D7D7D

CSS variables

:root {
  --lunar-surface-1: #7D7D7D;
  --lunar-surface-2: #B3B3B3;
  --lunar-surface-3: #D9D9D9;
  --lunar-surface-4: #6A6A6A;
  --lunar-surface-5: #9E9E9E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-surface": {
        1: "#7D7D7D",
        2: "#B3B3B3",
        3: "#D9D9D9",
        4: "#6A6A6A",
        5: "#9E9E9E",
      }
    }
  }
}

Related searches

monochromatic grey color schememinimalist space UI colorslunar rock inspired paletteclean professional grey themessubtle texture web design

Palette colors

Hex values

Color 1#7D7D7D
·
Color 2#B3B3B3
·
Color 3#D9D9D9
·
Color 4#6A6A6A
·
Color 5#9E9E9E
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
2.9:1Fail
1.3:1Fail
1.5:1Fail
2
2:1Fail
1.5:1Fail
2.6:1Fail
1.3:1Fail
3
2.9:1Fail
1.5:1Fail
3.8:1AA18
1.9:1Fail
4
1.3:1Fail
2.6:1Fail
3.8:1AA18
2:1Fail
5
1.5:1Fail
1.3:1Fail
1.9:1Fail
2:1Fail

Similar palettes

More like Lunar Surface

View all monochrome
Lunar Crater Surface
Lunar Surface Craters
Celestial Moon Dust
Lunar Crater Dust
Lunar Dust Veil
Lunar Dust Veil