Back to palettes

Palette

Urban Grid Echo

A cool, metropolitan collection of greys, mirroring the structured lines of a city grid at dawn.

neutralminimal5 colors
More neutral 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

#1C1C1C#36454F#708090#A9A9A9#DCDCDC

Palette guide

How to use Urban Grid Echo

Overview

The Urban Grid Echo palette offers a cool, metropolitan collection of greys, mirroring the structured lines of a city grid at dawn. This neutral palette ranges from the deep, dark #1C1C1C to the crisp, light #DCDCDC, complemented by the cool charcoal #36454F, the balanced #708090, and the versatile #A9A9A9. Designers and developers will find this selection highly effective for creating sophisticated, modern, and industrial aesthetics. It provides ample contrast opportunities for clear visual hierarchy and a clean, professional finish, ideal for projects demanding a refined, understated elegance.

Best used for

  • Corporate website design
  • Modern architectural renders
  • Tech startup branding
  • Minimalist app interfaces
  • Editorial layouts with a clean aesthetic
  • Industrial product showcases

Suggested color roles

primary

#36454F - A rich, cool charcoal grey that serves as an excellent primary color for headers, main navigation, or dominant UI elements.

secondary

#708090 - A mid-tone slate grey, highly versatile for supporting text, secondary buttons, or background sections that need subtle differentiation.

accent

#DCDCDC - A very light grey, almost white, perfect for highlights, active states, or subtle graphic elements to add crispness and contrast.

background

#A9A9A9 - A medium-light grey providing a neutral and calming backdrop that works well with both darker and lighter foreground elements.

text

#1C1C1C - A deep, near-black grey ensuring maximum legibility and strong contrast for all body text against lighter backgrounds.

Accessibility notes

  • Ensure #1C1C1C text on #DCDCDC or #A9A9A9 backgrounds meets WCAG AA contrast standards for optimal readability.
  • Exercise caution when using #708090 text on #A9A9A9 backgrounds; check contrast for smaller font sizes.
  • Use #DCDCDC for text only on very dark backgrounds like #1C1C1C or #36454F to maintain legibility.
  • Verify that interactive elements using mid-tones like #708090 have sufficient visual cues beyond color for accessibility.

Recommended combinations

Professional Contrast

Ideal for a clean, professional look, using dark text on a light background, with a cool mid-grey for secondary information.

#1C1C1C · #DCDCDC · #708090

Subtle Structure

Creates a sophisticated, layered effect suitable for dashboards or complex interfaces, using cool greys to define sections.

#36454F · #A9A9A9 · #708090

Modern Edge

Excellent for a sharp, contemporary aesthetic, combining a light canvas with dark, cool-toned typography and strong accents.

#DCDCDC · #36454F · #1C1C1C

CSS variables

:root {
  --urban-grid-echo-1: #1C1C1C;
  --urban-grid-echo-2: #36454F;
  --urban-grid-echo-3: #708090;
  --urban-grid-echo-4: #A9A9A9;
  --urban-grid-echo-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grid-echo": {
        1: "#1C1C1C",
        2: "#36454F",
        3: "#708090",
        4: "#A9A9A9",
        5: "#DCDCDC",
      }
    }
  }
}

Related searches

cool grey color schememetropolitan design paletteindustrial modern colorsneutral UI designcityscape grey palette

Palette colors

Hex values

Color 1#1C1C1C
·
Color 2#36454F
·
Color 3#708090
·
Color 4#A9A9A9
·
Color 5#DCDCDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
4.2:1AA18
7.3:1AAA
12.4:1AAA
2
1.7:1Fail
2.4:1Fail
4.2:1AA18
7.2:1AAA
3
4.2:1AA18
2.4:1Fail
1.7:1Fail
3:1Fail
4
7.3:1AAA
4.2:1AA18
1.7:1Fail
1.7:1Fail
5
12.4:1AAA
7.2:1AAA
3:1Fail
1.7:1Fail

Similar palettes

More like Urban Grid Echo

View all neutral
City Concrete Grind
Concrete Grid Lines
Concrete Jungle Bloom
Concrete Loft Living
Gritty Urban Canvas
Industrial Loft Concrete