Palette

Zen Garden

Harmonious greens and muted beiges create a peaceful and balanced environment, like a serene garden.

earthcalm5 colors

More earth 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

#A3B18A#588157#3A5A40#DAD7CD#808F7E

Palette guide

How to use Zen Garden

Overview

The Zen Garden palette (zen-garden-49) presents a deeply harmonious collection of earthy greens and muted beige tones, perfect for designs aiming for a natural, grounded feel. With colors like the soft sage #A3B18A, the rich forest green #588157, and the deep moss of #3A5A40, this palette evokes the tranquility of a serene garden. Designers can leverage the warmth of #DAD7CD as a gentle background, while #808F7E offers a versatile mid-tone. These exact hex codes provide a robust foundation for projects requiring a sense of peace, stability, and connection to nature, from brand identities to digital interfaces.

Best used for

Organic food and wellness branding
Eco-conscious product packaging
Nature-themed web design
Interior design concepts for peaceful spaces
Meditation and mindfulness app interfaces
Sustainable lifestyle blogs

Suggested color roles

primary

#588157 - A rich, balanced green that grounds the palette, ideal for main brand elements, key headings, or prominent sections.

secondary

#A3B18A - A softer, light sage green, suitable for supporting content, lighter backgrounds, or secondary navigation items.

accent

#3A5A40 - A deep, sophisticated moss green, perfect for subtle highlights, strong calls-to-action, or important icons that need depth.

background

#DAD7CD - A very light, warm beige, providing a neutral and inviting canvas for all content, ensuring excellent readability.

text

#808F7E - A muted, earthy gray-green, excellent for body text on lighter backgrounds like #DAD7CD, offering a soft contrast. For darker text, consider charcoal.

Accessibility notes

Ensure #808F7E text on #DAD7CD backgrounds meets WCAG AA contrast standards for body text.
The dark accent color #3A5A40 provides good contrast for text on #DAD7CD, making it suitable for headings or important information.
Be cautious when using #A3B18A as a background for lighter text; it may require darker text colors or increased font size for readability.
Reserve #588157 for interactive elements, ensuring its contrast against adjacent colors is sufficient for visual distinction.

Recommended combinations

Earthy Foundation

Excellent for website layouts where #DAD7CD is the background, #588157 for primary content blocks, and #3A5A40 for strong headings.

#DAD7CD · #588157 · #3A5A40

Garden Hues

Ideal for illustrating natural themes, with #A3B18A as a base, #808F7E for details, and #588157 for accent elements.

#A3B18A · #808F7E · #588157

Deep Forest

Use #3A5A40 for a dark, sophisticated background, with #DAD7CD for primary text and #A3B18A for subtle highlight elements.

#3A5A40 · #DAD7CD · #A3B18A

CSS variables

:root {
  --zen-garden-49-1: #A3B18A;
  --zen-garden-49-2: #588157;
  --zen-garden-49-3: #3A5A40;
  --zen-garden-49-4: #DAD7CD;
  --zen-garden-49-5: #808F7E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-49": {
        1: "#A3B18A",
        2: "#588157",
        3: "#3A5A40",
        4: "#DAD7CD",
        5: "#808F7E",
      }
    }
  }
}

Hex values

Color 1#A3B18A

Color 2#588157

Color 3#3A5A40

Color 4#DAD7CD

Color 5#808F7E

Accessibility

Contrast checker

2:1Fail

3.4:1AA18

1.6:1Fail

1.5:1Fail

2:1Fail

1.7:1Fail

3.1:1AA18

1.3:1Fail

3.4:1AA18

1.7:1Fail

5.4:1AA

2.3:1Fail

1.6:1Fail

3.1:1AA18

5.4:1AA

2.4:1Fail

1.5:1Fail

1.3:1Fail

2.3:1Fail

2.4:1Fail

Similar palettes

More like Zen Garden

View all earth

Ancient Forest Hearth

Ancient Moss Rune

Ancient Moss Whisper

Deep Forest Undergrowth

Desert Sage Bloom

Emerald Moss Glade