Palette

Urban Zen Structure

A sleek, sophisticated palette reflecting the clean lines and muted tones of contemporary urban architecture.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0E0E0#B3B3B3#7A7A7A#333333#F2F2F2

Palette guide

How to use Urban Zen Structure

Overview

The Urban Zen Structure palette presents a timeless monochrome collection, perfect for designs requiring clean lines and sophisticated simplicity. With a range from the almost-white "#F2F2F2" to the deep charcoal "#333333", and balanced mid-tones like "#B3B3B3" and "#7A7A7A", this palette embodies contemporary urban architecture. Designers will find it excellent for minimalist UI, corporate branding, or elegant print layouts. Developers can easily implement these versatile hex codes to build robust and visually consistent applications. This palette ensures a professional, calm, and highly readable user experience, making it a go-to for projects that value precision and understated elegance.

Best used for

Corporate and professional websites
Architectural portfolio design
High-tech product interfaces
Editorial content layouts
Minimalist app designs
Luxury brand identity

Suggested color roles

primary

#7A7A7A - A strong, balanced grey, ideal for main headings, navigation elements, or prominent graphical components, providing stability.

secondary

#B3B3B3 - A lighter, versatile grey, excellent for subheadings, dividing lines, or backgrounds for secondary content blocks.

accent

#E0E0E0 - A very light grey that offers subtle contrast, perfect for hover states, subtle borders, or background highlights.

background

#F2F2F2 - A clean, near-white background color, providing an airy and spacious canvas that enhances content readability.

text

#333333 - A deep, dark grey that ensures optimal readability for all body text, headings, and important labels against light backgrounds.

Accessibility notes

Ensure "#333333" text on "#F2F2F2" background meets WCAG AA standards for excellent readability.
Use "#7A7A7A" or "#333333" for interactive elements to guarantee sufficient contrast.
Avoid using "#E0E0E0" for small text as it lacks sufficient contrast against lighter backgrounds.
When using different grey tones for UI elements, ensure clear visual distinction through sufficient contrast ratios.

Recommended combinations

Core Readability

The essential trio for clean backgrounds, crisp text, and strong primary UI elements.

#F2F2F2 · #333333 · #7A7A7A

Layered UI

Great for creating subtle depth in UI, with a medium base, light accents, and dark, readable text.

#B3B3B3 · #E0E0E0 · #333333

Bold Structure

A sophisticated, high-contrast combination for dark-themed sections, strong titles, and bright highlights.

#333333 · #7A7A7A · #F2F2F2

CSS variables

:root {
  --urban-zen-structure-1: #E0E0E0;
  --urban-zen-structure-2: #B3B3B3;
  --urban-zen-structure-3: #7A7A7A;
  --urban-zen-structure-4: #333333;
  --urban-zen-structure-5: #F2F2F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-zen-structure": {
        1: "#E0E0E0",
        2: "#B3B3B3",
        3: "#7A7A7A",
        4: "#333333",
        5: "#F2F2F2",
      }
    }
  }
}

Hex values

Color 1#E0E0E0

Color 2#B3B3B3

Color 3#7A7A7A

Color 4#333333

Color 5#F2F2F2

Accessibility

Contrast checker

1.6:1Fail

3.3:1AA18

9.6:1AAA

1.2:1Fail

1.6:1Fail

2:1Fail

6:1AA

1.9:1Fail

3.3:1AA18

2:1Fail

2.9:1Fail

3.8:1AA18

9.6:1AAA

6:1AA

2.9:1Fail

11.3:1AAA

1.2:1Fail

1.9:1Fail

3.8:1AA18

11.3:1AAA

Similar palettes

More like Urban Zen Structure