Back to palettes

Palette

Zen Rock Garden

Reflects the serene simplicity and balanced elegance of a thoughtfully arranged 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

#6A6E73#8D939B#B4BAC1#D8DDE1#F0F2F3

Palette guide

How to use Zen Rock Garden

Overview

The Zen Rock Garden palette reflects the serene simplicity and balanced elegance of a thoughtfully arranged Japanese rock garden. This collection of cool grays, including `#6A6E73`, `#8D939B`, `#B4BAC1`, `#D8DDE1`, and `#F0F2F3`, offers designers and developers a sophisticated range for creating harmonious and understated digital experiences. The subtle blue undertones in these grays provide a refreshing coolness, making the palette ideal for projects that require a sense of calm, professionalism, and modern tranquility without being stark. It’s perfect for establishing a clean, focused visual identity.

Best used for

  • Elegant corporate websites
  • Educational platforms and dashboards
  • Healthcare interface design
  • Fine art portfolio presentations
  • Lifestyle and wellness blogs
  • Sustainable brand identity

Suggested color roles

primary

Utilize `#8D939B` as a versatile mid-gray for primary elements, offering a soft yet professional foundation.

secondary

Employ `#6A6E73` for headings, important text, or strong UI elements, providing depth and gravitas.

accent

Apply `#B4BAC1` for subtle highlights, interactive states, or secondary graphic elements, adding gentle contrast.

background

Use `#F0F2F3` as a very light, almost white background, creating an airy and clean canvas for content.

text

For body text, `#6A6E73` on light backgrounds like `#F0F2F3` or `#D8DDE1` ensures excellent readability and a refined aesthetic.

Accessibility notes

  • Ensure sufficient contrast when using lighter grays like `#D8DDE1` or `#B4BAC1` for text, especially on similar light backgrounds.
  • Text in `#6A6E73` on `#F0F2F3` offers good contrast and readability, meeting WCAG standards for larger text.
  • Interactive elements should have distinct visual cues for their states (hover, focus) to aid navigation.
  • Avoid placing light text on backgrounds with insufficient luminance difference to maintain clarity.

Recommended combinations

Refined Base

Ideal for primary content sections: `#F0F2F3` as background, `#8D939B` for body text, and `#6A6E73` for headings.

#F0F2F3 · #8D939B · #6A6E73

Subtle Depth

Great for card layouts or secondary information panels, providing a layered look with soft transitions.

#D8DDE1 · #B4BAC1 · #8D939B

Elegant Contrast

Effective for a prominent header or footer: `#6A6E73` as a solid background, `#F0F2F3` for text, and `#B4BAC1` for icons.

#6A6E73 · #F0F2F3 · #B4BAC1

CSS variables

:root {
  --zen-rock-garden-3-1: #6A6E73;
  --zen-rock-garden-3-2: #8D939B;
  --zen-rock-garden-3-3: #B4BAC1;
  --zen-rock-garden-3-4: #D8DDE1;
  --zen-rock-garden-3-5: #F0F2F3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-rock-garden-3": {
        1: "#6A6E73",
        2: "#8D939B",
        3: "#B4BAC1",
        4: "#D8DDE1",
        5: "#F0F2F3",
      }
    }
  }
}

Related searches

soft gray palettecool neutral schemeelegant minimalist colorszen inspired grayssubtle stone tones

Palette colors

Hex values

Color 1#6A6E73
·
Color 2#8D939B
·
Color 3#B4BAC1
·
Color 4#D8DDE1
·
Color 5#F0F2F3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.6:1Fail
3.8:1AA18
4.6:1AA
2
1.7:1Fail
1.6:1Fail
2.3:1Fail
2.8:1Fail
3
2.6:1Fail
1.6:1Fail
1.4:1Fail
1.7:1Fail
4
3.8:1AA18
2.3:1Fail
1.4:1Fail
1.2:1Fail
5
4.6:1AA
2.8:1Fail
1.7:1Fail
1.2:1Fail

Similar palettes

More like Zen Rock Garden

View all monochrome
Zen Garden Stone
Calm Stone Meditate
Charcoal River Stone
Granite Ridge Calm
Graphite Etching Stone
Monolith Granite Hue