Palette

Minimalist Urban Echo

Clean, crisp grays and near-whites embody the stark simplicity of modern city architecture.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4A4A#7B7B7B#AFAFAF#E0E0E0#2C2C2C

Palette guide

How to use Minimalist Urban Echo

Overview

The Minimalist Urban Echo palette captures the stark simplicity and clean lines of modern city architecture. Ranging from the deep charcoal of #2C2C2C to the airy near-white of #E0E0E0, with mid-tones like #4A4A4A and #7B7B7B, this palette is a masterclass in sophisticated grayscale design. It's an excellent choice for designers and developers aiming to create sleek, professional, and highly functional digital or physical products. These grays provide a strong foundation for conveying modernity, precision, and an uncluttered aesthetic, reflecting the urban landscape's timeless appeal.

Best used for

Modern architectural and real estate branding
High-tech company websites and applications
Urban photography portfolios
Clean, professional UI/UX design systems
Luxury automotive branding
Editorial design with a contemporary edge

Suggested color roles

primary

Use #4A4A4A for primary content areas, navigation, or strong visual sections, offering a solid, modern anchor.

secondary

Apply #7B7B7B for secondary text, subtle dividers, or background elements that need to recede slightly.

accent

Reserve #2C2C2C for critical accents, call-to-action buttons, or powerful headings to ensure maximum impact.

background

Utilize #E0E0E0 as a clean, expansive background color, providing an optimal canvas for dark text and vibrant imagery.

text

The darkest gray, #2C2C2C, is perfect for all body text on lighter backgrounds, ensuring excellent readability and a sharp finish.

Accessibility notes

Ensure #2C2C2C text on #E0E0E0 background meets WCAG AAA contrast for optimal readability.
Avoid using #AFAFAF for small text on #E0E0E0, as contrast may be insufficient; reserve it for larger titles.
Interactive elements should clearly indicate states (hover, active) using #2C2C2C or #4A4A4A.
For any text on #4A4A4A or #7B7B7B, ensure it's a lighter color like white or #E0E0E0 with sufficient contrast.

Recommended combinations

Urban Contrast

High-contrast pairing for backgrounds, primary text, and strong headings or UI elements.

#E0E0E0 · #2C2C2C · #4A4A4A

Layered Depth

Create subtle visual hierarchy and depth for cards, panels, or secondary content areas.

#7B7B7B · #AFAFAF · #4A4A4A

Dark Mode Base

Use #2C2C2C as a dark background with #E0E0E0 for text and #7B7B7B for secondary information.

#2C2C2C · #E0E0E0 · #7B7B7B

CSS variables

:root {
  --minimalist-urban-echo-1: #4A4A4A;
  --minimalist-urban-echo-2: #7B7B7B;
  --minimalist-urban-echo-3: #AFAFAF;
  --minimalist-urban-echo-4: #E0E0E0;
  --minimalist-urban-echo-5: #2C2C2C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "minimalist-urban-echo": {
        1: "#4A4A4A",
        2: "#7B7B7B",
        3: "#AFAFAF",
        4: "#E0E0E0",
        5: "#2C2C2C",
      }
    }
  }
}

Hex values

Color 1#4A4A4A

Color 2#7B7B7B

Color 3#AFAFAF

Color 4#E0E0E0

Color 5#2C2C2C

Accessibility

Contrast checker

2.1:1Fail

4:1AA18

6.7:1AA

1.6:1Fail

2.1:1Fail

1.9:1Fail

3.2:1AA18

3.3:1AA18

4:1AA18

1.9:1Fail

1.7:1Fail

6.4:1AA

6.7:1AA

3.2:1AA18

1.7:1Fail

10.6:1AAA

1.6:1Fail

3.3:1AA18

6.4:1AA

10.6:1AAA

Similar palettes

More like Minimalist Urban Echo

View all monochrome

Concrete Zenith Edge

Abstract Grid Pattern

City Grid Graphite

City Loft Grey

Minimal Loft Living

Minimalist Loft Space