Back to palettes

Palette

Zen Temple Garden

Soft, muted greens and grays for a tranquil and meditative atmosphere, like a peaceful temple garden.

monochromeminimal5 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

#5F6F5E#8E9B8E#BDBDBA#DCDCDC#7D8C7D

Palette guide

How to use Zen Temple Garden

Overview

The Zen Temple Garden palette offers a serene and muted blend of cool greens and soft grays, designed to create a tranquil and meditative atmosphere. Featuring a deep, dusty green #5F6F5E, a calming mid-tone green #7D8C7D, and versatile grays like #BDBDBA and #DCDCDC, this palette evokes the quiet beauty of a shaded garden. Designers can use these colors to promote a sense of peace and natural harmony, while developers will find them ideal for interfaces that prioritize calm and understated elegance. The subtle variation in tones allows for depth without visual noise.

Best used for

  • Meditation app interfaces
  • Eco-tourism website designs
  • Botanical garden branding
  • Spa and relaxation product lines
  • Sustainable architecture concepts
  • Minimalist nature photography showcases

Suggested color roles

primary

#5F6F5E provides a deep, grounding primary color for main headings, navigation, or significant visual elements.

secondary

#7D8C7D is excellent for secondary information, borders, or background fills, offering a harmonious and calm support.

accent

#8E9B8E can serve as a subtle accent, especially for interactive states, hover effects, or small decorative elements, adding a gentle lift.

background

#DCDCDC offers a clean, light base, ensuring content stands out and the overall feel is open and airy.

text

For dark text on light backgrounds, #5F6F5E provides strong contrast. For light text on darker elements, #DCDCDC or a near-white is suitable.

Accessibility notes

  • Ensure #5F6F5E text on #DCDCDC or #BDBDBA backgrounds meets WCAG AA contrast.
  • #8E9B8E might need careful contrast checks when used for text, especially on #DCDCDC; best for larger text or accents.
  • Use #7D8C7D for body text on light backgrounds like #DCDCDC for comfortable readability.
  • Avoid using very similar shades like #BDBDBA and #DCDCDC as text/background without checking contrast ratios.

Recommended combinations

Moss & Stone

A strong dark for text, a light background, and a calming secondary for UI elements.

#5F6F5E · #DCDCDC · #7D8C7D

Shaded Path

Ideal for layered UI cards, subtle gradients, and deep textual elements for depth.

#BDBDBA · #8E9B8E · #5F6F5E

Gentle Breeze

A light canvas with a calming green accent and a neutral supporting color for details.

#DCDCDC · #7D8C7D · #BDBDBA

CSS variables

:root {
  --zen-temple-garden-2-1: #5F6F5E;
  --zen-temple-garden-2-2: #8E9B8E;
  --zen-temple-garden-2-3: #BDBDBA;
  --zen-temple-garden-2-4: #DCDCDC;
  --zen-temple-garden-2-5: #7D8C7D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-temple-garden-2": {
        1: "#5F6F5E",
        2: "#8E9B8E",
        3: "#BDBDBA",
        4: "#DCDCDC",
        5: "#7D8C7D",
      }
    }
  }
}

Related searches

muted green gray palettetranquil zen garden colorscalm natural aestheticminimalist earth tone schemepeaceful meditation design

Palette colors

Hex values

Color 1#5F6F5E
·
Color 2#8E9B8E
·
Color 3#BDBDBA
·
Color 4#DCDCDC
·
Color 5#7D8C7D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.8:1Fail
3.9:1AA18
1.5:1Fail
2
1.8:1Fail
1.5:1Fail
2.1:1Fail
1.2:1Fail
3
2.8:1Fail
1.5:1Fail
1.4:1Fail
1.9:1Fail
4
3.9:1AA18
2.1:1Fail
1.4:1Fail
2.6:1Fail
5
1.5:1Fail
1.2:1Fail
1.9:1Fail
2.6:1Fail

Similar palettes

More like Zen Temple Garden

View all monochrome