Palette

Zen Garden Grey

A calming grayscale palette reflecting the understated elegance of a pebble garden.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F0F0#D3D3D3#9C9C9C#606060#333333

Palette guide

How to use Zen Garden Grey

Overview

The Zen Garden Grey palette (zen-garden-grey) is a sophisticated grayscale collection that perfectly embodies the understated elegance and serene simplicity of a pebble garden. Ranging from the nearly white #F0F0F0 to the deep charcoal #333333, with versatile mid-tones like #D3D3D3, #9C9C9C, and #606060, this monochrome palette is ideal for designs demanding clarity, professionalism, and a timeless aesthetic. Designers will find these exact hex codes invaluable for creating minimalist interfaces, architectural presentations, or corporate branding that conveys stability and calm. It provides a robust foundation for any project where color is used sparingly for impact.

Best used for

Corporate and professional websites
Minimalist UI/UX design
Architectural and interior design presentations
Photography portfolios
High-tech product branding
Editorial layouts for art or design publications

Suggested color roles

primary

#606060 - A strong, balanced mid-gray, excellent for main headings, primary UI elements, or accenting important content.

secondary

#9C9C9C - A lighter, versatile gray, ideal for supporting content blocks, secondary navigation, or subtle dividers.

accent

#333333 - A deep, impactful charcoal, perfect for strong calls-to-action, important icons, or prominent headings that demand attention.

background

#F0F0F0 - The lightest shade, providing a clean, bright, and expansive canvas that enhances readability and promotes a modern feel.

text

#606060 - A medium-dark gray, highly suitable for body text on light backgrounds like #F0F0F0 or #D3D3D3, offering excellent readability. For darker text, use #333333.

Accessibility notes

Ensure #606060 text on #F0F0F0 backgrounds meets WCAG AAA contrast standards for readability.
The darkest color, #333333, provides excellent contrast against all lighter shades, making it ideal for critical information and interactive elements.
Avoid using #F0F0F0 and #D3D3D3 for text against each other due to insufficient contrast; reserve them for backgrounds or subtle UI elements.
Always use a contrast checker, especially when pairing mid-tones like #9C9C9C with other light grays for text.

Recommended combinations

Classic Monochrome

A timeless combination for professional websites, with #F0F0F0 as the main background, #606060 for body text, and #333333 for headings.

#F0F0F0 · #606060 · #333333

Layered Depth

Ideal for creating subtle visual hierarchy in UI elements, such as cards or panels, using progressive shades of gray.

#D3D3D3 · #9C9C9C · #606060

High Contrast Focus

Use #F0F0F0 as a clean base, #333333 for strong calls-to-action or hero text, and #9C9C9C for secondary information.

#F0F0F0 · #333333 · #9C9C9C

CSS variables

:root {
  --zen-garden-grey-1: #F0F0F0;
  --zen-garden-grey-2: #D3D3D3;
  --zen-garden-grey-3: #9C9C9C;
  --zen-garden-grey-4: #606060;
  --zen-garden-grey-5: #333333;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-grey": {
        1: "#F0F0F0",
        2: "#D3D3D3",
        3: "#9C9C9C",
        4: "#606060",
        5: "#333333",
      }
    }
  }
}

Hex values

Color 1#F0F0F0

Color 2#D3D3D3

Color 3#9C9C9C

Color 4#606060

Color 5#333333

Accessibility

Contrast checker

1.3:1Fail

2.4:1Fail

5.5:1AA

11.1:1AAA

1.3:1Fail

1.8:1Fail

4.2:1AA18

8.4:1AAA

2.4:1Fail

1.8:1Fail

2.3:1Fail

4.6:1AA

5.5:1AA

4.2:1AA18

2.3:1Fail

2:1Fail

11.1:1AAA

8.4:1AAA

4.6:1AA

2:1Fail

Similar palettes

More like Zen Garden Grey

View all monochrome

Calm Stone Meditate

Minimalist Stone Garden

Monochromatic Stone Wall

Zen Meditation Stone

Zen Pebble Serenity

Architectural Grid Hues