Back to palettes

Palette

Zen Garden Serenity

Peaceful and balanced tones reflecting the minimalist beauty and tranquil simplicity of a Japanese Zen garden.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DCDCDC#C0C0C0#A9A9A9#6B8E23#8FBC8F

Palette guide

How to use Zen Garden Serenity

Overview

The Zen Garden Serenity palette offers a balanced and peaceful fusion of cool grays and soft, natural greens, reflecting the tranquil simplicity of a Japanese Zen garden. This palette expertly combines the crisp lightness of #DCDCDC with the grounding depth of #A9A9A9, punctuated by the refreshing accent of #6B8E23. Designers will find this combination ideal for creating interfaces that exude calm and clarity, promoting focus and a sense of well-being. Developers can leverage these precise hex codes to build visually consistent and soothing digital experiences, perfect for applications requiring a gentle, yet sophisticated, aesthetic.

Best used for

  • Meditation and wellness platforms
  • Minimalist lifestyle blogs
  • Sustainable fashion e-commerce
  • Therapy or counseling service websites
  • Nature-inspired product branding
  • Digital art galleries focusing on calm themes

Suggested color roles

primary

#A9A9A9 - A stable mid-grey, excellent for main content areas, navigation, or foundational UI elements, providing a neutral base.

secondary

#C0C0C0 - A lighter grey, ideal for secondary information, borders, or subtle background variations, adding visual texture.

accent

#6B8E23 - A fresh, earthy green, used strategically for calls-to-action, interactive elements, or key highlights to draw attention naturally.

background

#DCDCDC - A very light, near-white grey, providing an airy and clean canvas for all content.

text

#A9A9A9 - This mid-grey offers a soft, yet readable, option for body text against very light backgrounds, or use a darker charcoal for better contrast.

Accessibility notes

  • Ensure #A9A9A9 text on #DCDCDC meets WCAG AA contrast standards; consider a darker text color like charcoal or black for body text.
  • #6B8E23 on #DCDCDC generally offers good contrast for accents.
  • Avoid using #C0C0C0 for text on #DCDCDC backgrounds due to insufficient contrast.
  • Provide clear visual feedback for interactive elements beyond color, such as underlines or bolding.

Recommended combinations

Stone & Moss

Strong contrast for primary navigation, headers, or feature sections.

#A9A9A9 · #6B8E23 · #DCDCDC

Gentle Patina

Soft, harmonious blend for content cards, subtle backgrounds, or secondary information.

#C0C0C0 · #8FBC8F · #DCDCDC

Garden Highlight

Emphasizes interactive elements or key content with natural vibrancy.

#6B8E23 · #A9A9A9 · #8FBC8F

CSS variables

:root {
  --zen-garden-serenity-1: #DCDCDC;
  --zen-garden-serenity-2: #C0C0C0;
  --zen-garden-serenity-3: #A9A9A9;
  --zen-garden-serenity-4: #6B8E23;
  --zen-garden-serenity-5: #8FBC8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-serenity": {
        1: "#DCDCDC",
        2: "#C0C0C0",
        3: "#A9A9A9",
        4: "#6B8E23",
        5: "#8FBC8F",
      }
    }
  }
}

Related searches

grey green color schemezen calm ui colorsminimalist natural paletteserene web designbalanced neutral green

Palette colors

Hex values

Color 1#DCDCDC
·
Color 2#C0C0C0
·
Color 3#A9A9A9
·
Color 4#6B8E23
·
Color 5#8FBC8F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.8:1Fail
1.6:1Fail
2
1.3:1Fail
1.3:1Fail
2.1:1Fail
1.2:1Fail
3
1.7:1Fail
1.3:1Fail
1.6:1Fail
1.1:1Fail
4
2.8:1Fail
2.1:1Fail
1.6:1Fail
1.8:1Fail
5
1.6:1Fail
1.2:1Fail
1.1:1Fail
1.8:1Fail

Similar palettes

More like Zen Garden Serenity

View all neutral
Serene Pebble Path
Zen Garden Pebbles
Zen Garden Stillness
Zen Stone Garden
Bamboo Serenity Path
Coastal Driftwood Grey