Back to palettes

Palette

Zen Garden Calm

Quiet greys and soft greens promote serenity, like smooth stones and raked sand in a Japanese 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

#E8E4D9#C9D2CB#9FB8B1#768C86#50635C

Palette guide

How to use Zen Garden Calm

Overview

The Zen Garden Calm palette (zen-garden-calm) masterfully blends quiet greys and soft greens, evoking the peaceful ambiance of smooth stones and raked sand in a Japanese garden. With hues like the gentle off-white #E8E4D9, the muted seafoam #C9D2CB, and the deep forest green #50635C, this palette promotes serenity and balance. Designers will find its subtle sophistication perfect for projects requiring a tranquil yet refined aesthetic, from wellness apps to sustainable brand identities. Developers can implement these exact hex codes to ensure a consistent, calming user experience across web and mobile platforms, with #9FB8B1 and #768C86 providing excellent mid-tones.

Best used for

  • Wellness and meditation application interfaces
  • Sustainable and eco-friendly brand packaging
  • Spa and retreat website designs
  • Minimalist interior design concepts
  • Nature photography portfolios
  • Educational content on mindfulness

Suggested color roles

primary

#9FB8B1 - A balanced, muted green-gray that serves as a calming anchor for main content blocks, headings, or primary UI elements.

secondary

#C9D2CB - A lighter, airy green-gray, ideal for secondary content areas, subtle backgrounds, or card elements.

accent

#50635C - A deep, sophisticated forest green, perfect for strong calls-to-action, important icons, or prominent headings that need to ground the design.

background

#E8E4D9 - The lightest, almost off-white shade, providing a soft, warm, and inviting canvas that enhances readability.

text

#768C86 - A medium-dark green-gray, excellent for body text on lighter backgrounds like #E8E4D9, offering good readability without harshness. For darker text, use #50635C.

Accessibility notes

  • Ensure #768C86 text on #E8E4D9 backgrounds meets WCAG AA contrast standards for body text.
  • The darkest color, #50635C, provides excellent contrast for text on #E8E4D9 and #C9D2CB, making it suitable for critical information.
  • Avoid using #E8E4D9 and #C9D2CB for text against each other due to insufficient contrast; reserve them for backgrounds or subtle UI elements.
  • For interactive elements, use colors like #9FB8B1 or #50635C to ensure clear visibility and affordance.

Recommended combinations

Tranquil Flow

Creates a layered, soft background for web pages or app screens, with #E8E4D9 as the base and the others for subtle content blocks.

#E8E4D9 · #C9D2CB · #9FB8B1

Grounded Serenity

Ideal for a progressive color scheme in data visualization or a sophisticated brand gradient, moving from lighter to deeper greens.

#9FB8B1 · #768C86 · #50635C

Accent Contrast

Use #E8E4D9 as a clean base, #50635C for strong headings or buttons, and #768C86 for supporting body text.

#E8E4D9 · #50635C · #768C86

CSS variables

:root {
  --zen-garden-calm-1: #E8E4D9;
  --zen-garden-calm-2: #C9D2CB;
  --zen-garden-calm-3: #9FB8B1;
  --zen-garden-calm-4: #768C86;
  --zen-garden-calm-5: #50635C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-calm": {
        1: "#E8E4D9",
        2: "#C9D2CB",
        3: "#9FB8B1",
        4: "#768C86",
        5: "#50635C",
      }
    }
  }
}

Related searches

calm green grey paletteserene web color schemenatural meditation uizen garden inspired designpeaceful earth tones

Palette colors

Hex values

Color 1#E8E4D9
·
Color 2#C9D2CB
·
Color 3#9FB8B1
·
Color 4#768C86
·
Color 5#50635C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.7:1Fail
2.8:1Fail
5:1AA
2
1.2:1Fail
1.4:1Fail
2.3:1Fail
4.1:1AA18
3
1.7:1Fail
1.4:1Fail
1.7:1Fail
3:1AA18
4
2.8:1Fail
2.3:1Fail
1.7:1Fail
1.8:1Fail
5
5:1AA
4.1:1AA18
3:1AA18
1.8:1Fail

Similar palettes

More like Zen Garden Calm

View all neutral
Zen Garden Pebble
Zen Garden Ryoanji
Zen Garden Stone
Mindful Stone Serenity
Serene Pebble Path
Zen Garden Calm