Palette

Zen Stone Garden

A tranquil blend of cool greys and soft greens, inspired by the calming simplicity of a Zen garden.

NeutralMinimal5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CFD8DC#B0BEC5#78909C#81C784#388E3C

Palette guide

How to use Zen Stone Garden

Overview

The Zen Stone Garden palette delivers a refreshing blend of cool grays and vibrant greens, perfect for projects seeking a balanced and serene aesthetic. Featuring a soft light gray #CFD8DC, a deeper cool gray #78909C, and striking greens like the fresh #81C784 and earthy #388E3C, this palette embodies the tranquil simplicity of nature. Developers and designers will find these colors versatile for creating interfaces that feel clean, organic, and inviting. The mid-tone #B0BEC5 provides excellent support for subtle UI elements, enhancing overall harmony.

Best used for

Nature-themed app interfaces
Sustainable brand identities
Health and wellness websites
Eco-conscious product design
Educational materials (calming visuals)
Landscape design presentations

Suggested color roles

primary

#78909C serves as a strong, yet calm, primary color for main sections or prominent UI elements.

secondary

#B0BEC5 is ideal for secondary navigation, borders, or background fills, offering gentle support.

accent

Use #81C784 for calls to action, interactive states, or vibrant icons to draw attention with a fresh pop.

background

#CFD8DC provides a clean, light canvas, enhancing readability and a spacious feel.

text

For dark text, #388E3C offers a rich, natural alternative to black. For lighter text on darker elements, use #CFD8DC.

Accessibility notes

Ensure #388E3C text has good contrast against #CFD8DC or #B0BEC5 backgrounds.
#81C784 should be used carefully for text, especially on light backgrounds, or in larger sizes.
#78909C provides good contrast for text on lighter shades like #CFD8DC.
Avoid using very light colors like #CFD8DC as text on #B0BEC5 without checking contrast.

Recommended combinations

Fresh Earth

A balanced trio for main content, light background, and a vibrant interactive element.

#78909C · #CFD8DC · #81C784

Deep Garden

Excellent for a clean background, strong primary text, and a supporting UI element.

#CFD8DC · #388E3C · #B0BEC5

Stone Path

Useful for layered backgrounds, main headings, and a fresh accent.

#B0BEC5 · #78909C · #81C784

CSS variables

:root {
  --zen-stone-garden-1: #CFD8DC;
  --zen-stone-garden-2: #B0BEC5;
  --zen-stone-garden-3: #78909C;
  --zen-stone-garden-4: #81C784;
  --zen-stone-garden-5: #388E3C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-stone-garden": {
        1: "#CFD8DC",
        2: "#B0BEC5",
        3: "#78909C",
        4: "#81C784",
        5: "#388E3C",
      }
    }
  }
}

Hex values

Color 1#CFD8DC

Color 2#B0BEC5

Color 3#78909C

Color 4#81C784

Color 5#388E3C

Accessibility

Contrast checker

1.3:1Fail

2.3:1Fail

1.4:1Fail

2.8:1Fail

1.3:1Fail

1.8:1Fail

1.1:1Fail

2.2:1Fail

2.3:1Fail

1.8:1Fail

1.7:1Fail

1.2:1Fail

1.4:1Fail

1.1:1Fail

1.7:1Fail

2:1Fail

2.8:1Fail

2.2:1Fail

1.2:1Fail

2:1Fail

Similar palettes

More like Zen Stone Garden

View all Neutral

Minimal Pebble Shore

Industrial Grunge Fade

Modern Loft

Whispering Stone Garden

Zen Sand Garden

Cityscape Window Glint