Back to palettes

Palette

Zen Rock Garden

A tranquil arrangement of soothing grays, reflecting the simplicity and peace of a Japanese rock garden.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#EBEBEB#D0D0D0#B5B5B5#9B9B9B#7C7C7C

Palette guide

How to use Zen Rock Garden

Overview

The Zen Rock Garden palette offers a tranquil arrangement of soothing grays, reflecting the simplicity and peace of a Japanese rock garden. This collection, featuring `#EBEBEB`, `#D0D0D0`, `#B5B5B5`, `#9B9B9B`, and `#7C7C7C`, provides designers and developers with a versatile grayscale foundation. Its gentle progression from light to dark ensures excellent visual hierarchy and readability, making it ideal for creating clean, uncluttered, and professional digital experiences. The palette's inherent calmness and balance are perfect for projects aiming to convey stability, focus, and understated elegance in a modern context.

Best used for

  • Clean web interfaces and dashboards
  • Corporate reports and presentations
  • Minimalist branding and logos
  • Photography and art showcases
  • Educational materials and e-learning
  • Serene personal portfolio sites

Suggested color roles

primary

Utilize `#9B9B9B` as a reliable mid-gray for primary elements, such as buttons, active states, or main content dividers.

secondary

Employ `#B5B5B5` for secondary information, subtle borders, or background elements that need a gentle presence.

accent

Reserve `#7C7C7C` for strong emphasis, key headings, or calls to action, ensuring clarity and visual weight.

background

Apply `#EBEBEB` as the main background color, providing a soft, near-white canvas that enhances readability.

text

For optimal readability on light backgrounds, use `#7C7C7C` or a standard dark charcoal/black for body text and headings.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter grays like `#D0D0D0` or `#B5B5B5` for text.
  • Text in `#7C7C7C` on `#EBEBEB` provides excellent contrast, suitable for primary content and accessibility standards.
  • Interactive elements should have distinct hover/focus states to guide users, using darker shades for emphasis.
  • Avoid using light gray text on backgrounds that are too close in luminance to prevent legibility issues.

Recommended combinations

Clear Foundation

Ideal for primary content sections: `#EBEBEB` as background, `#7C7C7C` for body text, and `#9B9B9B` for subheadings.

#EBEBEB · #7C7C7C · #9B9B9B

Layered Harmony

Great for card components or distinct content blocks, using the lighter tones for structure and `#9B9B9B` for key information.

#D0D0D0 · #B5B5B5 · #9B9B9B

Strong Contrast

Effective for a prominent header or footer: `#7C7C7C` as a solid background, `#EBEBEB` for clear text, and `#B5B5B5` for icons.

#7C7C7C · #EBEBEB · #B5B5B5

CSS variables

:root {
  --zen-rock-garden-1: #EBEBEB;
  --zen-rock-garden-2: #D0D0D0;
  --zen-rock-garden-3: #B5B5B5;
  --zen-rock-garden-4: #9B9B9B;
  --zen-rock-garden-5: #7C7C7C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-rock-garden": {
        1: "#EBEBEB",
        2: "#D0D0D0",
        3: "#B5B5B5",
        4: "#9B9B9B",
        5: "#7C7C7C",
      }
    }
  }
}

Related searches

calm gray paletteminimalist zen colorsrock garden schemeneutral gray tonessubtle corporate colors

Palette colors

Hex values

Color 1#EBEBEB
·
Color 2#D0D0D0
·
Color 3#B5B5B5
·
Color 4#9B9B9B
·
Color 5#7C7C7C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.3:1Fail
3.5:1AA18
2
1.3:1Fail
1.3:1Fail
1.8:1Fail
2.7:1Fail
3
1.7:1Fail
1.3:1Fail
1.4:1Fail
2:1Fail
4
2.3:1Fail
1.8:1Fail
1.4:1Fail
1.5:1Fail
5
3.5:1AA18
2.7:1Fail
2:1Fail
1.5:1Fail

Similar palettes

More like Zen Rock Garden

View all monochrome
Minimalist Stone Garden
Zen Garden Pebble
Zen Stone Garden
Calm Stone Meditate
Lunar Surface
Monochrome Stone Garden