Back to palettes

Palette

Urban Zen Garden

A serene blend of urban concrete and subtle green, creating a tranquil oasis in a busy city.

monochromeminimal5 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

#5C6770#7B858D#A6ADAE#CED4D6#3C4247

Palette guide

How to use Urban Zen Garden

Overview

The Urban Zen Garden palette offers a sophisticated, monochrome blend ideal for creating serene digital environments. Featuring muted greys like the deep "#3C4247" and the lighter "#CED4D6", alongside balanced tones such as "#5C6770" and "#A6ADAE", this collection evokes a tranquil urban oasis. Designers can leverage these shades for clean, minimalist interfaces, robust branding, or architectural visualizations. Developers will find these hex codes straightforward to implement for consistent UI themes, ensuring a calm and professional user experience. This palette excels in projects requiring a sense of stability, modern elegance, and understated refinement, making it versatile for both corporate and creative applications.

Best used for

  • Minimalist website designs
  • Corporate branding and logos
  • Architectural rendering and visualization
  • Professional mobile application interfaces
  • Editorial design for luxury publications
  • Product packaging for high-end goods

Suggested color roles

primary

#5C6770 - A solid, dependable grey, perfect for main headings, navigation bars, or primary UI elements, providing a strong anchor.

secondary

#7B858D - A slightly lighter, versatile grey, excellent for subheadings, active states, or supporting content blocks.

accent

#A6ADAE - A soft, subtle grey that can provide gentle emphasis for highlights, dividers, or background elements that need to subtly stand out.

background

#CED4D6 - A very light, airy grey, ideal for clean page backgrounds, modal overlays, or large content areas to ensure readability.

text

#3C4247 - A dark, near-black grey ensuring high contrast and excellent readability for body text, links, and important labels.

Accessibility notes

  • Ensure "#3C4247" text on "#CED4D6" background meets WCAG AAA for optimal readability.
  • Use "#5C6770" or "#7B858D" for interactive elements to provide sufficient contrast against lighter backgrounds.
  • Avoid using "#A6ADAE" for small text; reserve it for larger headings or decorative elements when paired with light backgrounds.
  • When using multiple mid-tones like "#5C6770" and "#7B858D" together, maintain clear visual hierarchy through size or weight.

Recommended combinations

Foundation

Ideal for base UI elements: light background, dark readable text, and a strong primary button or header color.

#CED4D6 · #3C4247 · #5C6770

Subtle Depth

Creates gentle visual separation; good for card backgrounds, secondary text, and deep accent details.

#7B858D · #A6ADAE · #3C4247

Urban Edge

A bold, modern look with a dark base, medium grey elements, and light highlights for spacious layouts.

#3C4247 · #5C6770 · #CED4D6

CSS variables

:root {
  --urban-zen-garden-1: #5C6770;
  --urban-zen-garden-2: #7B858D;
  --urban-zen-garden-3: #A6ADAE;
  --urban-zen-garden-4: #CED4D6;
  --urban-zen-garden-5: #3C4247;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-zen-garden": {
        1: "#5C6770",
        2: "#7B858D",
        3: "#A6ADAE",
        4: "#CED4D6",
        5: "#3C4247",
      }
    }
  }
}

Related searches

minimalist grey color schemecalm urban paletteneutral branding colorsmodern monochrome designserene grey website palette

Palette colors

Hex values

Color 1#5C6770
·
Color 2#7B858D
·
Color 3#A6ADAE
·
Color 4#CED4D6
·
Color 5#3C4247
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
3.9:1AA18
1.8:1Fail
2
1.5:1Fail
1.7:1Fail
2.5:1Fail
2.7:1Fail
3
2.5:1Fail
1.7:1Fail
1.5:1Fail
4.5:1AA18
4
3.9:1AA18
2.5:1Fail
1.5:1Fail
6.8:1AA
5
1.8:1Fail
2.7:1Fail
4.5:1AA18
6.8:1AA

Similar palettes

More like Urban Zen Garden

View all monochrome
Monochromatic Foggy City
Stone Garden Meditation
Calm Stone Meditate
City Loft Minimal
City Steel Gleam
Concrete Bloom Grey