Palette

Urban Grid Echo

A stark range of greys capturing the precise, repetitive patterns of a modern urban grid.

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

#778899#A9A9A9#DCDCDC#4F4F4F#1C1C1C

Palette guide

How to use Urban Grid Echo

Overview

The Urban Grid Echo palette offers a sophisticated range of cool greys, perfect for conveying precision and modern minimalism. Anchored by the deep, near-black #1C1C1C and the soft, almost white #DCDCDC, this palette provides excellent contrast. Mid-tones like the cool slate grey #778899 and the balanced #A9A9A9, alongside the solid #4F4F4F, create a harmonious yet stark aesthetic. Designers and developers will find this collection ideal for projects requiring a clean, architectural feel, where subtle variations in grey define structure and depth without relying on vibrant hues. It evokes the structured, repetitive patterns of a contemporary urban landscape.

Best used for

Modern corporate branding
Architectural firm websites
Minimalist user interface designs
Tech product presentations
Photography portfolio backdrops
Industrial design concepts

Suggested color roles

primary

#4F4F4F - A strong, foundational grey ideal for main content sections, headers, or prominent UI elements that need to stand out.

secondary

#778899 - A cooler, slightly lighter grey that works well for subheadings, navigation menus, or secondary information panels, adding subtle variation.

accent

#DCDCDC - A very light grey, almost white, excellent for subtle highlights, interactive states (hover/active), or as a delicate separator line.

background

#A9A9A9 - A balanced medium-light grey providing a comfortable, neutral canvas for content, ensuring good readability with darker text.

text

#1C1C1C - A deep, almost black grey, offering high contrast and excellent readability for body text, ensuring clarity against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast between #1C1C1C text and #DCDCDC or #A9A9A9 backgrounds for WCAG AA compliance.
Avoid using adjacent mid-tones like #778899 and #A9A9A9 for critical information without adequate visual separation.
Check readability of smaller text sizes, especially when using #4F4F4F on #778899.
Use #DCDCDC sparingly for text, only against very dark backgrounds to maintain legibility.

Recommended combinations

High Contrast

Ideal for core content where dark text needs maximum readability on a bright background, with the mid-grey for secondary elements.

#1C1C1C · #DCDCDC · #778899

Subtle Depth

Creates a refined, layered look suitable for complex dashboards or data visualizations, using varied grey tones.

#4F4F4F · #A9A9A9 · #778899

Modern UI

Excellent for clean, modern user interfaces, using the light grey as a canvas, dark for text, and mid-dark for interactive elements.

#DCDCDC · #1C1C1C · #4F4F4F

CSS variables

:root {
  --urban-grid-echo-2-1: #778899;
  --urban-grid-echo-2-2: #A9A9A9;
  --urban-grid-echo-2-3: #DCDCDC;
  --urban-grid-echo-2-4: #4F4F4F;
  --urban-grid-echo-2-5: #1C1C1C;
}

Tailwind config

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

Hex values

Color 1#778899

Color 2#A9A9A9

Color 3#DCDCDC

Color 4#4F4F4F

Color 5#1C1C1C

Accessibility

Contrast checker

1.5:1Fail

2.7:1Fail

2.2:1Fail

4.7:1AA

1.5:1Fail

1.7:1Fail

3.5:1AA18

7.3:1AAA

2.7:1Fail

1.7:1Fail

6:1AA

12.4:1AAA

2.2:1Fail

3.5:1AA18

6:1AA

2.1:1Fail

4.7:1AA

7.3:1AAA

12.4:1AAA

2.1:1Fail

Similar palettes

More like Urban Grid Echo

View all monochrome

Monochrome City Grid

Architectural Grid Hues

Concrete Jungle Bloom

Urban Concrete Flow

Urban Concrete Sky

Urban Echo Stone