Back to palettes

Palette

Urban Zen Garden

Cool, understated greys reflecting the tranquility of a minimalist zen garden found amidst a bustling city.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C2C8C6#919C9A#6A7B7A#475B59#2C3F3E

Palette guide

How to use Urban Zen Garden

Overview

The "Urban Zen Garden" palette offers a deeply calming and sophisticated monochrome experience, blending cool grays with subtle hints of muted green. It descends from the light, airy grey-green #C2C8C6, reminiscent of mist, through a serene mid-tone #919C9A and a richer, contemplative #6A7B7A. The palette grounds itself with a deep, earthy green-gray #475B59 and a profound dark charcoal-teal #2C3F3E. This scheme is ideal for designs that aim to evoke tranquility, balance, and understated elegance amidst the urban rush, perfect for creating peaceful, minimalist environments for designers and developers.

Best used for

  • Wellness and meditation apps
  • Eco-conscious branding
  • Minimalist interior design concepts
  • Spa or retreat websites
  • Sustainable architecture firms
  • Personal blogs with a calm aesthetic

Suggested color roles

primary

Use #2C3F3E as a deep, grounding background or sophisticated brand color for a sense of calm.

secondary

Apply #475B59 to supporting elements, large text on lighter backgrounds, or key sections.

accent

Utilize #919C9A for subtle highlights, dividers, interactive elements, or delicate graphical touches.

background

Employ #C2C8C6 as a light, calming, and clean content area background, promoting tranquility.

text

Use #6A7B7A for readable body text on lighter backgrounds, or a crisp white for text on darker shades like #2C3F3E.

Accessibility notes

  • #6A7B7A on #C2C8C6 provides good contrast for body text, ensuring readability.
  • White or very light gray text on #2C3F3E and #475B59 ensures excellent readability for prominent text.
  • Avoid using #919C9A for small text on #C2C8C6 due to potential low contrast.
  • Ensure active elements, especially those using lighter palette colors, have clear visual cues beyond color.

Recommended combinations

Zen Depth

Strong, serene base with clean, contrasting light elements, ideal for minimalist layouts.

#2C3F3E · #475B59 · #C2C8C6

Calm Gradient

Smooth, tranquil gradients for headers or visual textures, evoking a peaceful atmosphere.

#919C9A · #6A7B7A · #475B59

Minimal Contrast

Light, inviting layout with clear, darker text and a deep anchor for balanced design.

#C2C8C6 · #6A7B7A · #2C3F3E

CSS variables

:root {
  --urban-zen-garden-2-1: #C2C8C6;
  --urban-zen-garden-2-2: #919C9A;
  --urban-zen-garden-2-3: #6A7B7A;
  --urban-zen-garden-2-4: #475B59;
  --urban-zen-garden-2-5: #2C3F3E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-zen-garden-2": {
        1: "#C2C8C6",
        2: "#919C9A",
        3: "#6A7B7A",
        4: "#475B59",
        5: "#2C3F3E",
      }
    }
  }
}

Related searches

zen garden color schemecalm grey green paletteminimalist peaceful colorsurban tranquility designmonochrome soothing palette

Palette colors

Hex values

Color 1#C2C8C6
·
Color 2#919C9A
·
Color 3#6A7B7A
·
Color 4#475B59
·
Color 5#2C3F3E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.6:1Fail
4.3:1AA18
6.6:1AA
2
1.7:1Fail
1.6:1Fail
2.6:1Fail
3.9:1AA18
3
2.6:1Fail
1.6:1Fail
1.6:1Fail
2.5:1Fail
4
4.3:1AA18
2.6:1Fail
1.6:1Fail
1.5:1Fail
5
6.6:1AA
3.9:1AA18
2.5:1Fail
1.5:1Fail

Similar palettes

More like Urban Zen Garden

View all monochrome
Contemplative Stone Flow
Grey Cloud Cascade
Morning Fog
River Stone Calm
River Stone Meditation
River Stone Serenity