Palette

Zen Garden

A tranquil collection reflecting the serene harmony and balanced simplicity of a Japanese 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 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.

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

Data visualization

#A9A9A9#608060#F5DEB3#465A5B#F8F8F8

Palette guide

How to use Zen Garden

Overview

The Zen Garden palette encapsulates the serene harmony of a Japanese zen garden, offering a balanced collection of tranquil colors. This palette features the earthy green #608060, a grounding charcoal-teal #465A5B, and the soft, inviting beige #F5DEB3. Complemented by the subtle grey #A9A9A9 and the airy off-white #F8F8F8, it's perfect for designs aiming to evoke peace, nature, and minimalist elegance. Developers and designers can utilize these shades to craft calming digital experiences, wellness-focused branding, or natural product presentations, creating an atmosphere of quiet reflection and natural beauty that resonates with users seeking tranquility.

Best used for

Wellness and meditation app interfaces
Eco-friendly and sustainable brand identity
Spa and retreat website design
Natural food and beverage packaging
Interior design mood boards for calming spaces
Mindfulness content platforms

Suggested color roles

primary

Use #608060 as the main color for calls to action, prominent graphics, or brand logos, conveying natural vitality and calm.

secondary

Apply #A9A9A9 for supporting elements like navigation links, subtle borders, or secondary text, providing a neutral balance.

accent

Utilize #F5DEB3 for gentle highlights, soft buttons, or warm background textures, adding a touch of inviting warmth.

background

Employ #F8F8F8 as a clean, expansive background, creating an airy and light canvas that enhances readability and focus.

text

For strong, readable body text, use #465A5B. For lighter text on dark backgrounds, a pure white or light grey is recommended.

Accessibility notes

Ensure #465A5B text on #F8F8F8 background meets WCAG AA standards for optimal readability.
Contrast between #608060 and #F5DEB3 may be too low for small text; use for larger headings or decorative elements.
Avoid using #A9A9A9 for body text on #F8F8F8 as contrast will likely be insufficient for many users.
When using #608060 for interactive elements, verify its contrast against the background color.

Recommended combinations

Natural Serenity

Creates a fresh, inviting layout for clean website backgrounds, with the green for primary elements and grey for balance.

#F8F8F8 · #608060 · #A9A9A9

Earthy Warmth

Excellent for cozy, natural branding or editorial layouts, pairing warm beige with grounding greys and deep teal.

#F5DEB3 · #A9A9A9 · #465A5B

Deep Calm

Use #465A5B as a sophisticated background with #F8F8F8 text and #608060 accents for a luxurious, calming dark mode.

#465A5B · #F8F8F8 · #608060

CSS variables

:root {
  --zen-garden-1: #A9A9A9;
  --zen-garden-2: #608060;
  --zen-garden-3: #F5DEB3;
  --zen-garden-4: #465A5B;
  --zen-garden-5: #F8F8F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden": {
        1: "#A9A9A9",
        2: "#608060",
        3: "#F5DEB3",
        4: "#465A5B",
        5: "#F8F8F8",
      }
    }
  }
}

Hex values

Color 1#A9A9A9

Color 2#608060

Color 3#F5DEB3

Color 4#465A5B

Color 5#F8F8F8

Accessibility

Contrast checker

1.9:1Fail

1.8:1Fail

3.1:1AA18

2.2:1Fail

1.9:1Fail

3.4:1AA18

1.7:1Fail

4.2:1AA18

1.8:1Fail

3.4:1AA18

5.6:1AA

1.2:1Fail

3.1:1AA18

1.7:1Fail

5.6:1AA

6.9:1AA

2.2:1Fail

4.2:1AA18

1.2:1Fail

6.9:1AA

Similar palettes

More like Zen Garden