Palette

Zen Garden Rake

A tranquil series of grays, reflecting the raked patterns and smooth stones of a minimalist Zen garden.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D3D3D3#A9A9A9#808080#696969#4D4D4D

Palette guide

How to use Zen Garden Rake

Overview

The Zen Garden Rake palette presents a sophisticated monochromatic journey through a range of tranquil grays, evoking the precise patterns of a raked Zen garden. This collection, anchored by the light #D3D3D3 and the deep, grounding #4D4D4D, is perfect for creating minimalist, elegant interfaces. Designers can utilize the subtle shifts between shades like #A9A9A9 and #808080 to establish hierarchy and texture without introducing additional hues. Developers will appreciate the straightforward color relationships for consistent theming, ensuring a calm and focused user experience. It's an ideal choice for projects prioritizing understated professionalism and serenity.

Best used for

Corporate minimalist websites
High-end product showcases
Photography portfolio sites
Art gallery digital platforms
Professional presentation templates
Meditation or mindfulness applications

Suggested color roles

primary

#808080 - A balanced mid-grey, suitable for main content blocks, headings, or primary action buttons, providing a solid foundation.

secondary

#A9A9A9 - Lighter and more subdued, ideal for secondary information, borders, or subtle background patterns, adding softness.

accent

#4D4D4D - The darkest shade, used sparingly for critical interactive elements or strong focus points, ensuring high impact.

background

#D3D3D3 - A very light grey, perfect for clean, spacious backgrounds, offering an airy feel without being stark white.

text

#696969 - A dark, readable grey, excellent for body text on lighter backgrounds, providing good contrast and legibility.

Accessibility notes

Text in #4D4D4D on #D3D3D3 offers excellent contrast for readability.
Be cautious with #A9A9A9 text on #D3D3D3 backgrounds; consider contrast tools.
Use #696969 or darker for all standard body text to ensure WCAG AA compliance.
Ensure interactive elements have sufficient visual feedback beyond just color change, especially for lighter shades.

Recommended combinations

Stone Path

High-contrast combination for headers, footers, or prominent UI sections.

#4D4D4D · #808080 · #D3D3D3

Raked Gravel

Soft, layered look for content cards, panels, or secondary information.

#A9A9A9 · #D3D3D3 · #696969

Deep Shadow

Creates depth and emphasis for interactive elements or strong visual hierarchy.

#696969 · #808080 · #4D4D4D

CSS variables

:root {
  --zen-garden-rake-1: #D3D3D3;
  --zen-garden-rake-2: #A9A9A9;
  --zen-garden-rake-3: #808080;
  --zen-garden-rake-4: #696969;
  --zen-garden-rake-5: #4D4D4D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-rake": {
        1: "#D3D3D3",
        2: "#A9A9A9",
        3: "#808080",
        4: "#696969",
        5: "#4D4D4D",
      }
    }
  }
}

Hex values

Color 1#D3D3D3

Color 2#A9A9A9

Color 3#808080

Color 4#696969

Color 5#4D4D4D

Accessibility

Contrast checker

1.6:1Fail

2.6:1Fail

3.7:1AA18

5.6:1AA

1.6:1Fail

1.7:1Fail

2.3:1Fail

3.6:1AA18

2.6:1Fail

1.7:1Fail

1.4:1Fail

2.1:1Fail

3.7:1AA18

2.3:1Fail

1.4:1Fail

1.5:1Fail

5.6:1AA

3.6:1AA18

2.1:1Fail

1.5:1Fail

Similar palettes

More like Zen Garden Rake

View all monochrome

Zen Stone Garden

Calm Stone Meditate

Stone Garden Meditation

Zen Meditation Stone

Zen Pebble Serenity

Zen Sand Garden