Palette

Zen Stone Garden

A minimalist palette of calming greys, inspired by the smooth, raked stones of a Japanese Zen garden.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D9D9D9#BFBFBF#A6A6A6#8C8C8C#737373

Palette guide

How to use Zen Stone Garden

Overview

The Zen Stone Garden palette is a minimalist collection of calming greys, inspired by the smooth, raked stones of a Japanese Zen garden. Featuring shades from the light #D9D9D9 to the deep #737373, including #BFBFBF, #A6A6A6, and #8C8C8C, this monochrome palette provides designers and developers with a sophisticated and serene foundation. It's ideal for creating interfaces and branding that prioritize clarity, focus, and a sense of quiet elegance. The harmonious progression of shades allows for subtle hierarchy and depth, making it perfect for projects that aim for a refined, contemporary, and unobtrusive aesthetic across digital and print mediums.

Best used for

Clean and simple web and mobile interfaces
Architectural renders and presentations
High-end furniture or decor branding
Photography exhibition catalogs and art books
Minimalist blog or portfolio design
Professional corporate reports and documents

Suggested color roles

primary

Use #A6A6A6 as a balanced, versatile mid-grey for main content blocks, providing a stable and professional appearance.

secondary

Employ #BFBFBF for lighter supportive elements, subtle backgrounds, or dividers, adding a touch of softness.

accent

Apply #737373 as the darkest grey for strong emphasis, primary text, or interactive elements, ensuring clarity.

background

Utilize #D9D9D9 as the lightest, clean, and expansive base, maximizing white space and visual breathability.

text

For body text, use #737373 on lighter backgrounds like #D9D9D9 for excellent contrast, or a true black for maximum legibility.

Accessibility notes

Ensure #737373 text on #D9D9D9 background meets WCAG AA contrast ratios for optimal readability.
#8C8C8C also provides good contrast for headings or larger text on #D9D9D9, enhancing visual hierarchy.
Avoid using #BFBFBF or #A6A6A6 for small text on #D9D9D9 due to potentially insufficient contrast for accessibility.
For essential body text, consider using black or a very dark charcoal against #D9D9D9 to guarantee compliance.

Recommended combinations

Clear Readability

Creates strong contrast for main content, blending a light background with dark and mid-tone greys for clarity.

#D9D9D9 · #737373 · #8C8C8C

Soft Progression

Achieves a gentle, layered effect for backgrounds or subtle UI elements, promoting a sense of calm continuity.

#D9D9D9 · #BFBFBF · #A6A6A6

Defined Structure

A mid-tone base with strong dark text and a light highlight, ideal for professional and modern aesthetics with clear definition.

#A6A6A6 · #737373 · #D9D9D9

CSS variables

:root {
  --zen-stone-garden-7-1: #D9D9D9;
  --zen-stone-garden-7-2: #BFBFBF;
  --zen-stone-garden-7-3: #A6A6A6;
  --zen-stone-garden-7-4: #8C8C8C;
  --zen-stone-garden-7-5: #737373;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-stone-garden-7": {
        1: "#D9D9D9",
        2: "#BFBFBF",
        3: "#A6A6A6",
        4: "#8C8C8C",
        5: "#737373",
      }
    }
  }
}

Hex values

Color 1#D9D9D9

Color 2#BFBFBF

Color 3#A6A6A6

Color 4#8C8C8C

Color 5#737373

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

2.4:1Fail

3.4:1AA18

1.3:1Fail

1.8:1Fail

2.6:1Fail

1.7:1Fail

1.3:1Fail

1.4:1Fail

1.9:1Fail

2.4:1Fail

1.8:1Fail

1.4:1Fail

3.4:1AA18

2.6:1Fail

1.9:1Fail

1.4:1Fail

Similar palettes

More like Zen Stone Garden

Zen Stone Garden

See it in context.

Ready when you are.

Built with Zen Stone Garden.

How to use Zen Stone Garden

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Clear Readability

Soft Progression

Defined Structure

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Zen Stone Garden