Back to palettes

Palette

Zen Garden Calm

Subtle, harmonious greys and muted greens that mirror the tranquil simplicity of a zen garden.

neutralminimal5 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

#DED9C7#A5A58D#8A8D84#6D6E6A#C2BFB2

Palette guide

How to use Zen Garden Calm

Overview

The Zen Garden Calm palette (zen-garden-calm-3) offers a deeply soothing and minimalist collection of muted greys and understated greens, perfectly capturing the essence of a tranquil, stone-filled garden. With hues like the warm beige-gray #DED9C7, the subtle olive-gray #A5A58D, and the deeper, grounding tone of #6D6E6A, this palette is ideal for designs seeking a natural, unobtrusive feel. Designers can use the balanced mid-tone #8A8D84 for versatile applications, while #C2BFB2 provides a gentle supporting color. These exact hex codes facilitate the creation of serene interfaces, branding, or editorial content that prioritizes calm and natural elegance.

Best used for

  • Minimalist branding for artisan products
  • Spa and wellness center websites
  • Eco-conscious fashion or home goods
  • Editorial design for nature or lifestyle magazines
  • Zen-inspired interior design visualizations
  • Digital portfolios emphasizing calm aesthetics

Suggested color roles

primary

#A5A58D - A soft, earthy olive-gray, excellent for main content areas, headings, or significant UI elements, providing a natural anchor.

secondary

#C2BFB2 - A lighter, warm gray with a hint of green, perfect for supporting sections, subtle backgrounds, or card elements.

accent

#6D6E6A - A deep, grounding grey-green, ideal for calls-to-action, important icons, or strong textual emphasis.

background

#DED9C7 - The lightest, warmest tone, serving as a gentle, inviting base for all content, promoting a soft and airy feel.

text

#8A8D84 - A balanced mid-tone gray-green, suitable for body text on lighter backgrounds like #DED9C7, offering good readability with a soft touch. For darker text, consider #6D6E6A.

Accessibility notes

  • Ensure #8A8D84 text on #DED9C7 backgrounds meets WCAG AA contrast standards for body text.
  • The darkest color, #6D6E6A, offers strong contrast against #DED9C7 and #C2BFB2, making it suitable for critical information.
  • Avoid using #DED9C7 and #C2BFB2 for text against each other due to low contrast; they are best used as backgrounds or subtle dividers.
  • For interactive elements, use colors like #A5A58D or #6D6E6A to ensure they stand out sufficiently.

Recommended combinations

Stone & Moss

Creates a natural, layered look for web pages, with #DED9C7 as the page background, #A5A58D for content cards, and #6D6E6A for headings.

#DED9C7 · #A5A58D · #6D6E6A

Quiet Harmony

Ideal for subtle UI elements like forms or filters, where #C2BFB2 is the field background, #8A8D84 for labels, and #A5A58D for borders.

#C2BFB2 · #8A8D84 · #A5A58D

Deep Earth

Use #6D6E6A for a sophisticated, dark footer or sidebar, with #DED9C7 for text and #C2BFB2 for subtle interactive elements.

#6D6E6A · #DED9C7 · #C2BFB2

CSS variables

:root {
  --zen-garden-calm-3-1: #DED9C7;
  --zen-garden-calm-3-2: #A5A58D;
  --zen-garden-calm-3-3: #8A8D84;
  --zen-garden-calm-3-4: #6D6E6A;
  --zen-garden-calm-3-5: #C2BFB2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-calm-3": {
        1: "#DED9C7",
        2: "#A5A58D",
        3: "#8A8D84",
        4: "#6D6E6A",
        5: "#C2BFB2",
      }
    }
  }
}

Related searches

muted grey green palettenatural stone color schemeserene minimalist colorscalm earth tone palettezen garden web design

Palette colors

Hex values

Color 1#DED9C7
·
Color 2#A5A58D
·
Color 3#8A8D84
·
Color 4#6D6E6A
·
Color 5#C2BFB2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.4:1Fail
3.6:1AA18
1.3:1Fail
2
1.8:1Fail
1.3:1Fail
2:1Fail
1.4:1Fail
3
2.4:1Fail
1.3:1Fail
1.5:1Fail
1.8:1Fail
4
3.6:1AA18
2:1Fail
1.5:1Fail
2.8:1Fail
5
1.3:1Fail
1.4:1Fail
1.8:1Fail
2.8:1Fail

Similar palettes

More like Zen Garden Calm

View all neutral
Calm Lakeside Stone
Minimalist Cairn Stack
Pebble Beach Stone
River Stone Whisper
Riverbend Stone
Serene Zen Cairn