Palette

Lunar Rock Shadow

Stark and quiet shades inspired by the moon's surface, offering a contemplative and spacious feel.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#708090#DCDCDC#F8F8F8#606060

Palette guide

How to use Lunar Rock Shadow

Overview

The Lunar Rock Shadow palette presents a collection of stark and quiet shades inspired by the moon's surface, offering a contemplative and spacious feel. This cool neutral scheme ranges from the deep #36454F (Charcoal Grey) to the near-white #F8F8F8, with balanced mid-tones like #708090 (Slate Grey) and #DCDCDC (Gainsboro). The consistency in cool grey hues ensures a minimalist and sophisticated aesthetic, perfect for conveying clarity, professionalism, and a sense of calm. It's an excellent choice for designers seeking an uncluttered, modern, and highly functional visual identity, adaptable for various digital and print applications.

Best used for

Minimalist website and application interfaces
Architectural presentations and blueprints
Tech and scientific documentation
Contemporary art and photography portfolios
Brand identities emphasizing clarity and space
Cool-toned interior design concepts

Suggested color roles

primary

Use #36454F (Charcoal Grey) for main content areas, prominent headings, or primary interactive elements, providing a strong, elegant anchor.

secondary

Employ #708090 (Slate Grey) for supporting information, subheadings, or background textures, offering a softer complementary tone.

accent

Apply #606060 (Dark Grey) sparingly for subtle highlights, hover states, or decorative lines, adding a touch of depth and contrast.

background

Utilize #F8F8F8 (Near White) as a clean, expansive background, creating an open and airy feel that enhances readability.

text

For optimal readability, use #36454F (Charcoal Grey) for all body text and primary headings against lighter backgrounds.

Accessibility notes

Ensure #36454F text on #F8F8F8 backgrounds meets WCAG AA contrast standards for good readability.
Avoid using #DCDCDC for small text on #F8F8F8 as the contrast will be insufficient; reserve it for larger decorative elements.
Text in #708090 on #F8F8F8 provides good contrast, suitable for secondary text or larger elements.
When layering mid-tones like #708090 and #606060, ensure clear visual separation through size or weight differences.

Recommended combinations

Deep Shadow

Ideal for creating deep, layered backgrounds or sections that convey a sense of grounded depth and sophistication.

#36454F · #606060 · #708090

Lunar Light

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

#F8F8F8 · #DCDCDC · #708090

Minimal Contrast

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

#F8F8F8 · #36454F · #DCDCDC

CSS variables

:root {
  --lunar-rock-shadow-1: #36454F;
  --lunar-rock-shadow-2: #708090;
  --lunar-rock-shadow-3: #DCDCDC;
  --lunar-rock-shadow-4: #F8F8F8;
  --lunar-rock-shadow-5: #606060;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-rock-shadow": {
        1: "#36454F",
        2: "#708090",
        3: "#DCDCDC",
        4: "#F8F8F8",
        5: "#606060",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#708090

Color 3#DCDCDC

Color 4#F8F8F8

Color 5#606060

Accessibility

Contrast checker

2.4:1Fail

7.2:1AAA

9.3:1AAA

1.6:1Fail

2.4:1Fail

3:1Fail

3.8:1AA18

1.6:1Fail

7.2:1AAA

3:1Fail

1.3:1Fail

4.6:1AA

9.3:1AAA

3.8:1AA18

1.3:1Fail

5.9:1AA

1.6:1Fail

4.6:1AA

5.9:1AA

Similar palettes

More like Lunar Rock Shadow

Lunar Rock Shadow

See it in context.

Ready when you are.

Built with Lunar Rock Shadow.

How to use Lunar Rock Shadow

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Shadow

Lunar Light

Minimal Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Lunar Rock Shadow