Back to palettes

Palette

Zen Garden Serene

A peaceful collection of greens and muted beiges, reflecting the tranquility and balance of a minimalist Japanese garden.

earthcalm5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6B8E23#A5AA70#DCDCAA#F0F8DC#4F6B1C

Palette guide

How to use Zen Garden Serene

Overview

The Zen Garden Serene palette captures the lush, yet understated, beauty of a meticulously tended Japanese garden. This collection features a harmonious range of greens and muted beiges, from the deep, grounding #4F6B1C to the bright, airy #F0F8DC. Designers can leverage the natural warmth of #A5AA70 and the refreshing vibrancy of #6B8E23 to create interfaces that feel organic and inviting. Developers will find this palette ideal for building applications that require a natural, calming aesthetic, ensuring visual consistency and an experience rooted in tranquility and balance.

Best used for

  • Eco-friendly brand websites
  • Health and wellness applications
  • Gardening and outdoor living platforms
  • Organic food and product e-commerce
  • Nature photography showcases
  • Environmental advocacy sites

Suggested color roles

primary

#6B8E23 - A vibrant, earthy green, perfect for main calls-to-action, prominent headings, or sections needing a natural focal point.

secondary

#A5AA70 - A soft, muted olive, ideal for secondary buttons, background panels, or subtle decorative elements, adding warmth.

accent

#4F6B1C - A deep, rich forest green, used sparingly for strong emphasis, important icons, or interactive states, providing depth.

background

#F0F8DC - A very light, almost off-white, with a hint of green, creating a fresh and spacious canvas.

text

#4F6B1C - The darkest green offers excellent readability for body text on lighter backgrounds, maintaining the natural theme.

Accessibility notes

  • #4F6B1C text on #F0F8DC provides strong contrast for excellent readability.
  • Be cautious using #A5AA70 for text on #F0F8DC; check contrast carefully.
  • Ensure interactive elements using #6B8E23 have sufficient contrast with their surrounding background.
  • Provide clear visual indicators for focus and hover states, especially for elements using lighter greens.

Recommended combinations

Garden Path

High-contrast for headers, navigation, or primary content blocks.

#4F6B1C · #6B8E23 · #F0F8DC

Muted Foliage

Soft, organic layering for content cards, panels, or secondary information.

#A5AA70 · #DCDCAA · #F0F8DC

Fresh Growth

Creates depth and natural vibrancy for illustrative elements or feature sections.

#6B8E23 · #A5AA70 · #4F6B1C

CSS variables

:root {
  --zen-garden-serene-1: #6B8E23;
  --zen-garden-serene-2: #A5AA70;
  --zen-garden-serene-3: #DCDCAA;
  --zen-garden-serene-4: #F0F8DC;
  --zen-garden-serene-5: #4F6B1C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-serene": {
        1: "#6B8E23",
        2: "#A5AA70",
        3: "#DCDCAA",
        4: "#F0F8DC",
        5: "#4F6B1C",
      }
    }
  }
}

Related searches

natural green color paletteearth tone web designzen garden green schemecalm organic colorseco friendly ui palette

Palette colors

Hex values

Color 1#6B8E23
·
Color 2#A5AA70
·
Color 3#DCDCAA
·
Color 4#F0F8DC
·
Color 5#4F6B1C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
3.5:1AA18
1.6:1Fail
2
1.6:1Fail
1.7:1Fail
2.2:1Fail
2.5:1Fail
3
2.7:1Fail
1.7:1Fail
1.3:1Fail
4.3:1AA18
4
3.5:1AA18
2.2:1Fail
1.3:1Fail
5.6:1AA
5
1.6:1Fail
2.5:1Fail
4.3:1AA18
5.6:1AA

Similar palettes

More like Zen Garden Serene

View all earth
Enchanted Garden Gate
Garden Gate Ivy
Bamboo Grove Mist
Dune Seagrass Drift
Forest Whisper Green
Herbal Tea Steam