Palette

Zen Garden Calm

A palette reflecting the peaceful and balanced tones of a traditional Japanese rock garden.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A9B3B8#D6DCE0#7D8F98#4C575D#E5E9EC

Palette guide

How to use Zen Garden Calm

Overview

The Zen Garden Calm palette (zen-garden-calm-2) offers a sophisticated collection of cool, muted neutrals, perfect for creating clean, minimalist, and serene designs. Featuring soft grays like #D6DCE0 and #E5E9EC, alongside deeper, anchoring tones such as #A9B3B8 and the strong charcoal #4C575D, this palette beautifully reflects the quiet elegance of a traditional rock garden. Designers will appreciate its versatility for corporate, luxury, or wellness applications, while developers can confidently implement these exact hex codes to achieve a consistent, understated aesthetic across various digital platforms. The mid-tone #7D8F98 provides an excellent bridge between light and dark.

Best used for

Corporate websites with a calm, professional image
Luxury brand identities and packaging
Minimalist UI/UX design
Architectural and interior design portfolios
High-end technology interfaces
Serene digital art and photography backgrounds

Suggested color roles

primary

#A9B3B8 - A balanced, cool gray that serves as a sophisticated main color for large sections, headers, or primary UI elements.

secondary

#D6DCE0 - A very light, airy gray, ideal for secondary backgrounds, subtle dividers, or card elements, providing visual breathing room.

accent

#4C575D - A deep, rich charcoal, perfect for strong calls-to-action, important icons, or prominent headings that require high contrast.

background

#E5E9EC - The lightest shade, providing a clean, almost white canvas that enhances readability and keeps the design feeling open.

text

#7D8F98 - A mid-tone gray, excellent for body text on light backgrounds like #E5E9EC or #D6DCE0, offering good readability without harshness. For darker text, use #4C575D.

Accessibility notes

Ensure #7D8F98 text on #E5E9EC or #D6DCE0 backgrounds meets WCAG AA contrast ratios for readability.
The darkest color, #4C575D, provides excellent contrast for text on any of the lighter background shades within the palette.
Avoid using #D6DCE0 and #E5E9EC for text against each other due to insufficient contrast; reserve them for backgrounds or subtle UI elements.
For interactive elements, use #4C575D or #A9B3B8 to ensure clear visibility and affordance.

Recommended combinations

Minimalist Core

A classic combination for professional websites, with #E5E9EC as the main background, #A9B3B8 for content blocks, and #4C575D for headings.

#E5E9EC · #A9B3B8 · #4C575D

Subtle Depth

Ideal for card interfaces or layered UI, where #D6DCE0 is the card background, #7D8F98 for text, and #A9B3B8 for borders or secondary elements.

#D6DCE0 · #7D8F98 · #A9B3B8

Anchored Contrast

Use #4C575D as a dark, impactful background for a hero section, with #E5E9EC for primary text and #D6DCE0 for subtle highlights.

#4C575D · #E5E9EC · #D6DCE0

CSS variables

:root {
  --zen-garden-calm-2-1: #A9B3B8;
  --zen-garden-calm-2-2: #D6DCE0;
  --zen-garden-calm-2-3: #7D8F98;
  --zen-garden-calm-2-4: #4C575D;
  --zen-garden-calm-2-5: #E5E9EC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-calm-2": {
        1: "#A9B3B8",
        2: "#D6DCE0",
        3: "#7D8F98",
        4: "#4C575D",
        5: "#E5E9EC",
      }
    }
  }
}

Hex values

Color 1#A9B3B8

Color 2#D6DCE0

Color 3#7D8F98

Color 4#4C575D

Color 5#E5E9EC

Accessibility

Contrast checker

1.5:1Fail

1.6:1Fail

3.5:1AA18

1.8:1Fail

1.5:1Fail

2.4:1Fail

5.4:1AA

1.1:1Fail

1.6:1Fail

2.4:1Fail

2.2:1Fail

2.7:1Fail

3.5:1AA18

5.4:1AA

2.2:1Fail

6.1:1AA

1.8:1Fail

1.1:1Fail

2.7:1Fail

6.1:1AA

Similar palettes

More like Zen Garden Calm

Mindful Stone Serenity

Serene Pebble Path