Palette

Urban Zen Stone

Clean, understated shades of cool greys and stone, embodying modern minimalist design.

Neutralminimal5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8F97A0#B0B7BF#606C7A#3A434F#DDE1E6

Palette guide

How to use Urban Zen Stone

Overview

The Urban Zen Stone palette delivers a clean, modern aesthetic with its collection of cool, understated greys. Anchored by the deep "#3A434F" and complemented by the lighter "#DDE1E6", this palette evokes the natural elegance of stone and concrete. Tones like "#8F97A0" and "#B0B7BF" provide versatile mid-range options, while "#606C7A" adds a touch of subtle depth. Designers can utilize these shades for sophisticated interfaces, architectural portfolios, or contemporary brand identities. Developers will appreciate the cohesive nature of these hex codes for building harmonious UI themes that convey stability, minimalism, and a refined sense of modern design.

Best used for

Architectural firm websites
Modern art gallery digital experiences
Luxury product interfaces
Industrial design presentations
Minimalist e-commerce platforms
Professional corporate reports

Suggested color roles

primary

#606C7A - A strong, cool grey that serves as an excellent foundation for main navigation, key buttons, or prominent headers.

secondary

#8F97A0 - A versatile mid-tone grey, perfect for subheadings, secondary information, or card backgrounds.

accent

#B0B7BF - A light, cool grey that can be used for subtle highlights, interactive element hover states, or dividers.

background

#DDE1E6 - A very light, almost off-white grey, providing a clean and spacious canvas for content, ensuring high readability.

text

#3A434F - A deep, dark grey that offers excellent contrast against lighter backgrounds, ideal for body text and important labels.

Accessibility notes

Ensure "#3A434F" text on "#DDE1E6" background meets WCAG AA standards for essential readability.
Use "#606C7A" or "#3A434F" for interactive elements to guarantee sufficient contrast.
"#B0B7BF" should be used cautiously for text; it's better suited for decorative elements or larger headings.
When layering, ensure adequate contrast between adjacent grey tones, especially for content separation.

Recommended combinations

Solid Base

Creates a strong, readable foundation with a light background, dark text, and a prominent call-to-action color.

#DDE1E6 · #3A434F · #606C7A

Layered Depth

Ideal for structured layouts, using mid-tones for cards or sections, lighter highlights, and dark text.

#8F97A0 · #B0B7BF · #3A434F

Modern Contrast

Provides a sophisticated, high-contrast look, suitable for dark mode themes with light text and accent details.

#3A434F · #606C7A · #DDE1E6

CSS variables

:root {
  --urban-zen-stone-1: #8F97A0;
  --urban-zen-stone-2: #B0B7BF;
  --urban-zen-stone-3: #606C7A;
  --urban-zen-stone-4: #3A434F;
  --urban-zen-stone-5: #DDE1E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-zen-stone": {
        1: "#8F97A0",
        2: "#B0B7BF",
        3: "#606C7A",
        4: "#3A434F",
        5: "#DDE1E6",
      }
    }
  }
}

Hex values

Color 1#8F97A0

Color 2#B0B7BF

Color 3#606C7A

Color 4#3A434F

Color 5#DDE1E6

Accessibility

Contrast checker

1.5:1Fail

1.8:1Fail

3.4:1AA18

2.3:1Fail

1.5:1Fail

2.6:1Fail

4.9:1AA

1.5:1Fail

1.8:1Fail

2.6:1Fail

1.9:1Fail

4.1:1AA18

3.4:1AA18

4.9:1AA

1.9:1Fail

7.6:1AAA

2.3:1Fail

1.5:1Fail

4.1:1AA18

7.6:1AAA

Similar palettes

More like Urban Zen Stone

Urban Zen Stone

See it in context.

Ready when you are.

Built with Urban Zen Stone.

How to use Urban Zen Stone

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Solid Base

Layered Depth

Modern Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Urban Zen Stone