Palette

Urban Concrete Echo

A sleek, modern palette of varying greys inspired by city architecture and concrete textures.

monochromeminimal5 colors

More monochrome 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

#A3A3A3#7A7A7A#525252#333333#1F1F1F

Palette guide

How to use Urban Concrete Echo

Overview

The Urban Concrete Echo palette (version 2) is a sleek, modern collection of varying grays, inspired by city architecture and robust industrial aesthetics. This darker, more intense monochrome offers a strong, sophisticated foundation ideal for impactful and contemporary designs. It ranges from the very light medium gray `#A3A3A3` to the deepest charcoal `#1F1F1F`. Key colors include a balanced medium gray `#7A7A7A`, a solid dark gray `#525252`, and a rich very dark gray `#333333`. This palette creates a powerful visual echo of urban textures, perfect for projects requiring a bold, minimalist, and cool-toned presence.

Best used for

Dark mode interfaces and applications
Industrial branding and identity
Robust tech product design
Cinematic title sequences
Automotive design presentations
Modern art and photography showcases

Suggested color roles

primary

Use `#1F1F1F` as a dominant, grounding color for large areas, robust typography, or to create dramatic depth in dark mode.

secondary

Apply `#333333` for body text, subheadings, or supporting content blocks, offering strong readability against lighter elements.

accent

Introduce `#A3A3A3` for clear highlights, interactive elements, or to provide a sharp visual break in dark layouts.

background

Utilize `#525252` for solid and modern dark backgrounds, creating a sophisticated base for light text and accents.

text

For light text on dark backgrounds, `#A3A3A3` or a crisp white provides excellent contrast. For darker text on lighter elements, `#1F1F1F` is ideal.

Accessibility notes

Ensure `#A3A3A3` text on `#1F1F1F` or `#333333` background meets WCAG contrast standards for readability.
Verify that interactive elements using lighter grays have sufficient contrast against their background.
Avoid using very dark grays for text on equally dark backgrounds without testing contrast carefully.
Ensure enough visual distinction between adjacent dark grays like `#1F1F1F` and `#333333` for UI elements.

Recommended combinations

Dark Mode Core

Ideal for constructing dark mode interfaces, providing strong depth with clear, bright accents for readability.

#1F1F1F · #333333 · #A3A3A3

Industrial Layers

Excellent for backgrounds, overlays, or graphic elements that require a smooth, subtle gradient effect in a dark context.

#525252 · #7A7A7A · #A3A3A3

Sharp Contrast

Perfect for headings, calls-to-action, or prominent graphic elements that need a strong dark base with striking light highlights.

#1F1F1F · #A3A3A3 · #7A7A7A

CSS variables

:root {
  --urban-concrete-echo-2-1: #A3A3A3;
  --urban-concrete-echo-2-2: #7A7A7A;
  --urban-concrete-echo-2-3: #525252;
  --urban-concrete-echo-2-4: #333333;
  --urban-concrete-echo-2-5: #1F1F1F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-echo-2": {
        1: "#A3A3A3",
        2: "#7A7A7A",
        3: "#525252",
        4: "#333333",
        5: "#1F1F1F",
      }
    }
  }
}

Hex values

Color 1#A3A3A3

Color 2#7A7A7A

Color 3#525252

Color 4#333333

Color 5#1F1F1F

Accessibility

Contrast checker

1.7:1Fail

3.1:1AA18

5:1AA

6.5:1AA

1.7:1Fail

1.8:1Fail

2.9:1Fail

3.8:1AA18

3.1:1AA18

1.8:1Fail

1.6:1Fail

2.1:1Fail

5:1AA

2.9:1Fail

1.6:1Fail

1.3:1Fail

6.5:1AA

3.8:1AA18

2.1:1Fail

1.3:1Fail

Similar palettes

More like Urban Concrete Echo

Industrial Cityscape Grey

Modern Loft Concrete