Back to palettes

Palette

Urban Grid Echo

A stark, commanding grayscale palette reflecting the structured, geometric patterns and raw materials of urban architecture.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2B2B#4A4A4A#6F6F6F#A8A8A8#DCDCDC

Palette guide

How to use Urban Grid Echo

Overview

The Urban Grid Echo palette presents a stark, commanding grayscale collection that reflects the structured, geometric patterns and raw materials of urban architecture. Featuring deep charcoal #2B2B2B, mid-tones like #4A4A4A and #6F6F6F, and lighter greys #A8A8A8 and #DCDCDC, this palette offers a strong foundation for minimalist design. It's especially useful for developers and designers aiming for a clean, industrial, or modern aesthetic where precision and clarity are paramount. The range provides excellent contrast possibilities, allowing for sophisticated visual hierarchies without relying on color.

Best used for

  • Industrial product branding
  • Modernist architecture portfolios
  • Technical documentation interfaces
  • Dark mode UI themes
  • Urban photography websites
  • Abstract art platforms

Suggested color roles

primary

#2B2B2B - A deep, authoritative grey perfect for major headings, primary calls to action, or foundational structural elements.

secondary

#4A4A4A - A slightly lighter dark grey, ideal for subheadings, navigation items, or important data labels, providing strong visual weight.

accent

#DCDCDC - A very light grey, almost white, excellent for highlights, interactive states, or subtle separators, providing sharp contrast.

background

#A8A8A8 - A balanced medium-light grey that serves as a versatile background, offering good readability for both dark and lighter text.

text

#2B2B2B - This dark charcoal ensures high contrast and legibility for body text against lighter backgrounds like #A8A8A8 or #DCDCDC.

Accessibility notes

  • Ensure #2B2B2B text on #DCDCDC or #A8A8A8 backgrounds meets WCAG AA contrast standards for readability.
  • Use #DCDCDC for text only on very dark backgrounds like #2B2B2B or #4A4A4A to maintain legibility.
  • Avoid placing adjacent mid-tones such as #4A4A4A and #6F6F6F for critical information without sufficient size or weight differences.
  • Verify icon and interactive element visibility, especially when using lighter greys on medium grey backgrounds.

Recommended combinations

Dark Mode Base

Provides a strong dark background with bright text, accented by a subtle mid-grey for secondary information or dividers.

#2B2B2B · #DCDCDC · #6F6F6F

Clean & Readable

Excellent for content-heavy designs, offering a light background with clear, dark text and a slightly lighter dark for emphasis.

#A8A8A8 · #2B2B2B · #4A4A4A

Layered Structure

Creates a sophisticated, layered look for UI elements or data visualizations where depth and subtle differentiation are key.

#4A4A4A · #A8A8A8 · #6F6F6F

CSS variables

:root {
  --urban-grid-echo-3-1: #2B2B2B;
  --urban-grid-echo-3-2: #4A4A4A;
  --urban-grid-echo-3-3: #6F6F6F;
  --urban-grid-echo-3-4: #A8A8A8;
  --urban-grid-echo-3-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grid-echo-3": {
        1: "#2B2B2B",
        2: "#4A4A4A",
        3: "#6F6F6F",
        4: "#A8A8A8",
        5: "#DCDCDC",
      }
    }
  }
}

Related searches

dark grey monochromatic paletteindustrial color schememinimalist grayscale designmodern UI grey colorsarchitectural dark theme

Palette colors

Hex values

Color 1#2B2B2B
·
Color 2#4A4A4A
·
Color 3#6F6F6F
·
Color 4#A8A8A8
·
Color 5#DCDCDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.8:1Fail
6:1AA
10.3:1AAA
2
1.6:1Fail
1.8:1Fail
3.7:1AA18
6.5:1AA
3
2.8:1Fail
1.8:1Fail
2.1:1Fail
3.7:1AA18
4
6:1AA
3.7:1AA18
2.1:1Fail
1.7:1Fail
5
10.3:1AAA
6.5:1AA
3.7:1AA18
1.7:1Fail

Similar palettes

More like Urban Grid Echo

View all monochrome
Urban Concrete Flow
City Steel Gleam
Concrete Jungle Bloom
Grayscale Urban Loft
Industrial Chic Echo
Industrial Cityscape Grey