Palette

Zen Temple Garden

A calming selection of deep to light greens, inspired by serene Japanese gardens and mossy stones.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#70823F#8FBC8F#D0F0C0#F5FFFA

Palette guide

How to use Zen Temple Garden

Overview

The Zen Temple Garden palette is a refreshing and calming collection of deep forest and vibrant greens, complemented by crisp, airy neutrals. Featuring a rich charcoal #36454F, an olive-moss #70823F, and a bright mint #D0F0C0, this palette beautifully captures the essence of a serene, lush garden. Designers can use these colors to evoke peace, growth, and natural beauty. Developers will find the high contrast between the deep and light shades excellent for creating readable and engaging interfaces. The near-white #F5FFFA ensures a clean, expansive feel, making this palette versatile for many applications.

Best used for

Eco-conscious brand identities
Botanical illustration and design
Health and wellness application UI
Outdoor adventure marketing
Sustainable product packaging
Nature photography websites

Suggested color roles

primary

#36454F provides a strong, grounding primary for main headings, navigation, or important textual content.

secondary

#70823F is excellent for secondary elements, borders, or background patterns, offering a natural, earthy complement.

accent

#8FBC8F serves as a refreshing accent, perfect for interactive elements, highlights, or graphical features that need a touch of vibrant green.

background

#F5FFFA offers a pristine, airy canvas, ensuring excellent readability and a spacious feel.

text

For dark text on light backgrounds, #36454F provides optimal contrast. For light text on darker elements, #F5FFFA works well.

Accessibility notes

Ensure #36454F text on #F5FFFA or #D0F0C0 backgrounds meets WCAG AAA contrast.
#8FBC8F might need larger sizes or sufficient contrast when used for text against lighter backgrounds.
Use #70823F for body text on #F5FFFA for good readability.
Avoid using #D0F0C0 as text on #F5FFFA due to extremely low contrast; best for subtle backgrounds or large graphic elements.

Recommended combinations

Forest Path

A strong dark for text, a clean white background, and an earthy secondary for UI elements.

#36454F · #F5FFFA · #70823F

Lush Canopy

Ideal for layered backgrounds, a vibrant accent, and deep textual elements for depth.

#D0F0C0 · #8FBC8F · #36454F

Fresh Growth

A light canvas with an earthy primary and a fresh, vibrant accent for interactive elements.

#F5FFFA · #70823F · #8FBC8F

CSS variables

:root {
  --zen-temple-garden-1: #36454F;
  --zen-temple-garden-2: #70823F;
  --zen-temple-garden-3: #8FBC8F;
  --zen-temple-garden-4: #D0F0C0;
  --zen-temple-garden-5: #F5FFFA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-temple-garden": {
        1: "#36454F",
        2: "#70823F",
        3: "#8FBC8F",
        4: "#D0F0C0",
        5: "#F5FFFA",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#70823F

Color 3#8FBC8F

Color 4#D0F0C0

Color 5#F5FFFA

Accessibility

Contrast checker

2.3:1Fail

4.6:1AA

8:1AAA

9.7:1AAA

2.3:1Fail

2:1Fail

3.4:1AA18

4.2:1AA18

4.6:1AA

2:1Fail

1.7:1Fail

2.1:1Fail

8:1AAA

3.4:1AA18

1.7:1Fail

1.2:1Fail

9.7:1AAA

4.2:1AA18

2.1:1Fail

1.2:1Fail

Similar palettes

More like Zen Temple Garden

View all monochrome

Enchanted Moss Glimmer

Forest Canopy Slumber

Meditative Grove Green

Zen Bamboo Retreat

Ancient Forest Myst

Emerald River Flow