Palette

Lunar Rock Garden

Stark and serene, reflecting the muted tones of lunar landscapes and serene rock gardens.

MonochromeMinimal5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A1D#333333#555555#888888#BBBBBB

Palette guide

How to use Lunar Rock Garden

Overview

The Lunar Rock Garden palette offers a stark and serene collection of muted grey tones, reflecting the minimalist beauty of lunar landscapes and tranquil rock gardens. Ranging from the very dark #1A1A1D (Near Black) to the light #BBBBBB (Light Grey), this monochromatic scheme provides strong foundational elements for clean and sophisticated design. The intermediate shades like #333333 (Dark Grey) and #555555 (Medium Dark Grey) ensure versatility for depth and contrast without introducing additional hues. It's an ideal choice for designers aiming for a serious, modern, and uncluttered aesthetic, perfect for conveying stability, professionalism, and understated elegance.

Best used for

Minimalist branding and corporate identities
Industrial design and architectural presentations
Tech and software user interfaces
Scientific publications and data visualizations
Dark mode themes for web and mobile apps
Stark and serene photography backdrops

Suggested color roles

primary

Use #333333 (Dark Grey) for main content areas, prominent headings, or primary interactive elements, establishing a strong, modern presence.

secondary

Employ #555555 (Medium Dark Grey) for supporting information, subheadings, or background textures, offering a subtle complementary tone.

accent

Apply #888888 (Medium Grey) sparingly for subtle highlights, hover states, or decorative lines, adding a delicate touch of contrast.

background

Utilize #1A1A1D (Very Dark Grey) as a deep, immersive background, providing an excellent canvas for lighter elements.

text

For optimal readability, use #BBBBBB (Light Grey) or #888888 for all body text and primary headings against the dark backgrounds.

Accessibility notes

Ensure #BBBBBB text on #1A1A1D backgrounds meets WCAG AA contrast standards for good readability.
Avoid using #888888 for small text on #555555 as the contrast may be insufficient; reserve it for larger elements.
Text in #555555 on #BBBBBB provides good contrast, suitable for secondary text or larger elements.
When designing, prioritize light text on dark backgrounds and vice-versa for critical information to maximize legibility.

Recommended combinations

Deep Rock

Ideal for creating deep, layered backgrounds or sections that convey a sense of gravitas and robust structure.

#1A1A1D · #333333 · #555555

Lunar Surface

Perfect for clean UI elements, subtle gradients, or backgrounds that evoke a bright, expansive lunar surface.

#888888 · #BBBBBB · #555555

Stark Contrast

Effective for high-impact headlines or key feature blocks where light text needs to stand out on a deep, dark background.

#1A1A1D · #BBBBBB · #333333

CSS variables

:root {
  --lunar-rock-garden-1: #1A1A1D;
  --lunar-rock-garden-2: #333333;
  --lunar-rock-garden-3: #555555;
  --lunar-rock-garden-4: #888888;
  --lunar-rock-garden-5: #BBBBBB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-rock-garden": {
        1: "#1A1A1D",
        2: "#333333",
        3: "#555555",
        4: "#888888",
        5: "#BBBBBB",
      }
    }
  }
}

Hex values

Color 1#1A1A1D

Color 2#333333

Color 3#555555

Color 4#888888

Color 5#BBBBBB

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

4.9:1AA

9:1AAA

1.4:1Fail

1.7:1Fail

3.6:1AA18

6.6:1AA

2.3:1Fail

1.7:1Fail

2.1:1Fail

3.9:1AA18

4.9:1AA

3.6:1AA18

2.1:1Fail

1.8:1Fail

9:1AAA

6.6:1AA

3.9:1AA18

1.8:1Fail

Similar palettes

More like Lunar Rock Garden

Minimalist Loft Whites

Moss Stone Serene