Palette

Urban Concrete Echo

Reflects the subtle variations of concrete and steel in a minimalist city landscape.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Concrete Echo 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 Concrete Echo.

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

Data visualization

#2B2D2F#4E5052#7D8083#B1B4B7#DDE0E3

Palette guide

How to use Urban Concrete Echo

Overview

The Urban Concrete Echo palette captures the subtle variations of concrete and steel in a minimalist city landscape, offering a range of cool-toned grays that are clean and understated. This palette is perfect for designs that prioritize sophistication, clarity, and a modern aesthetic. It transitions gracefully from a very dark cool gray `#2B2D2F` to an airy very light cool gray `#DDE0E3`. Key colors include a robust dark cool gray `#4E5052`, a balanced medium cool gray `#7D8083`, and a gentle light cool gray `#B1B4B7`. This collection creates a harmonious and refined visual experience, ideal for professional and contemporary applications.

Best used for

Minimalist web design and UI/UX
Architectural visualizations and renders
Sophisticated product packaging
Modern corporate identity
Clean data visualization
High-tech brand collateral

Suggested color roles

primary

Use `#2B2D2F` as a strong, anchoring color for headlines, primary navigation, or powerful graphic elements, providing a deep, cool foundation.

secondary

Apply `#4E5052` for body text, subheadings, or larger content blocks, offering robust support with a cool undertone.

accent

Introduce `#B1B4B7` for subtle highlights, interactive elements, or to provide a gentle visual break, adding a touch of lightness.

background

Utilize `#DDE0E3` for expansive, clean backgrounds, creating an airy and sophisticated canvas that enhances readability.

text

For dark text on light backgrounds, `#2B2D2F` offers excellent contrast. For lighter text on darker elements, a crisp white or a light gray like `#B1B4B7` works well.

Accessibility notes

Ensure `#2B2D2F` text on `#DDE0E3` background meets WCAG contrast standards for body text.
Verify that `#4E5052` text on `#DDE0E3` also maintains sufficient contrast for readability.
Avoid using `#B1B4B7` or `#7D8083` for small text elements against very light backgrounds due to potential low contrast.
When using multiple light grays, ensure enough visual distinction between them for users with low vision.

Recommended combinations

Minimalist UI

Ideal for clean web interfaces, providing clear hierarchy with strong dark elements on a light, cool background.

#2B2D2F · #4E5052 · #DDE0E3

Steel & Concrete

Excellent for backgrounds, overlays, or graphic elements that require a smooth, subtle gradient effect, evoking modern architectural materials.

#DDE0E3 · #B1B4B7 · #7D8083

Sophisticated Contrast

Perfect for headings, dividers, or prominent graphic elements that need a strong dark anchor with a refined light highlight.

#2B2D2F · #B1B4B7 · #4E5052

CSS variables

:root {
  --urban-concrete-echo-1: #2B2D2F;
  --urban-concrete-echo-2: #4E5052;
  --urban-concrete-echo-3: #7D8083;
  --urban-concrete-echo-4: #B1B4B7;
  --urban-concrete-echo-5: #DDE0E3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-echo": {
        1: "#2B2D2F",
        2: "#4E5052",
        3: "#7D8083",
        4: "#B1B4B7",
        5: "#DDE0E3",
      }
    }
  }
}

Hex values

Color 1#2B2D2F

Color 2#4E5052

Color 3#7D8083

Color 4#B1B4B7

Color 5#DDE0E3

Accessibility

Contrast checker

1.7:1Fail

3.5:1AA18

6.6:1AA

10.4:1AAA

1.7:1Fail

2:1Fail

3.9:1AA18

6.1:1AA

3.5:1AA18

2:1Fail

1.9:1Fail

3:1Fail

6.6:1AA

3.9:1AA18

1.9:1Fail

1.6:1Fail

10.4:1AAA

6.1:1AA

3:1Fail

1.6:1Fail

Similar palettes

More like Urban Concrete Echo

View all neutral

Bare Concrete Stillness

Brutalist Bloom Grey

Concrete Grid Lines

Concrete Jungle

Concrete Jungle Bloom

Concrete Loft Living