Back to palettes

Palette

Zen Rock Garden

Pure grays in gentle progression, reflecting the quiet contemplation 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

#F5F5F5#DCDCDC#B0B0B0#808080#505050

Palette guide

How to use Zen Rock Garden

Overview

The Zen Rock Garden palette presents a pure grayscale progression, reflecting the quiet contemplation of a Japanese rock garden. With shades ranging from the near-white `#F5F5F5` to the deep charcoal `#505050`, including `DCDCDC`, `#B0B0B0`, and `#808080`, this palette is a masterclass in minimalist design. It offers designers and developers a robust foundation for creating clean, sophisticated, and highly structured visual experiences. The clear tonal hierarchy allows for excellent readability and a strong sense of order, making it ideal for projects where clarity and elegance are paramount.

Best used for

  • High-end minimalist branding
  • Architectural visualization websites
  • Photography portfolios
  • Luxury product interfaces
  • Editorial design with strong imagery
  • Clean, data-heavy dashboards

Suggested color roles

primary

Use `#808080` as a versatile mid-tone for important elements, providing a solid anchor in the grayscale spectrum.

secondary

Apply `#B0B0B0` for secondary text, dividers, or subtle backgrounds, offering a softer, supporting role.

accent

Reserve `#505050` for critical calls to action, prominent headings, or to add deep contrast in UI elements.

background

Employ `#F5F5F5` as the primary background, offering a soft, almost white canvas that feels clean and expansive.

text

For body text on lighter backgrounds, `#505050` or a standard black ensures optimal readability and a crisp, professional look.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using `#B0B0B0` on `#DCDCDC` for smaller text.
  • Text in `#505050` on `#F5F5F5` provides strong contrast, suitable for all primary content.
  • All interactive elements should meet WCAG contrast guidelines, particularly against their background state.
  • Consider using `#505050` for all body text for consistent readability across different light backgrounds.

Recommended combinations

High Contrast Read

Perfect for main content blocks: `#F5F5F5` for the page background, `#505050` for body text, and `#808080` for secondary headings.

#F5F5F5 · #505050 · #808080

Layered Detail

Ideal for card components or subtle sections, using `#DCDCDC` as a base, `#B0B0B0` for borders, and `#808080` for text.

#DCDCDC · #B0B0B0 · #808080

Deep Foundation

Use `#505050` for a strong header or footer, with `#F5F5F5` for clear text and `#B0B0B0` for subtle interactive elements.

#505050 · #F5F5F5 · #B0B0B0

CSS variables

:root {
  --zen-rock-garden-2-1: #F5F5F5;
  --zen-rock-garden-2-2: #DCDCDC;
  --zen-rock-garden-2-3: #B0B0B0;
  --zen-rock-garden-2-4: #808080;
  --zen-rock-garden-2-5: #505050;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-rock-garden-2": {
        1: "#F5F5F5",
        2: "#DCDCDC",
        3: "#B0B0B0",
        4: "#808080",
        5: "#505050",
      }
    }
  }
}

Related searches

minimalist gray palettezen garden color schemegrayscale design systemmodern neutral tonesrock inspired palette

Palette colors

Hex values

Color 1#F5F5F5
·
Color 2#DCDCDC
·
Color 3#B0B0B0
·
Color 4#808080
·
Color 5#505050
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2:1Fail
3.6:1AA18
7.4:1AAA
2
1.3:1Fail
1.6:1Fail
2.9:1Fail
5.9:1AA
3
2:1Fail
1.6:1Fail
1.8:1Fail
3.7:1AA18
4
3.6:1AA18
2.9:1Fail
1.8:1Fail
2:1Fail
5
7.4:1AAA
5.9:1AA
3.7:1AA18
2:1Fail

Similar palettes

More like Zen Rock Garden

View all Monochrome
Zen River Stones
Aged Stone Reverie
Grayscale Stone Etch
Gritty Urban Canvas
Lunar Rock Garden
Minimalist Loft Whites