Palette

Urban Grid Rhythm

A stark, modern grayscale palette reflecting the crisp lines of city architecture.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0E0E0#A0A0A0#606060#303030#101010

Palette guide

How to use Urban Grid Rhythm

Overview

The Urban Grid Rhythm palette offers a stark, modern grayscale collection reflecting the crisp lines of city architecture. Ranging from the very light #E0E0E0 to the deep, almost black #101010, and including balanced tones like #A0A0A0, #606060, and #303030, this palette is designed for designers and developers seeking a clean, precise, and highly functional aesthetic. It provides a robust framework for creating strong visual hierarchies and ensures excellent readability across various applications. This monochrome selection is perfect for projects that demand a sophisticated and enduring sense of structure, free from distracting colors.

Best used for

Modern corporate identity
Architectural visualization projects
Minimalist web design
Print layouts for technical manuals
User interface for productivity apps
Photography website backgrounds

Suggested color roles

primary

#303030 - A deep, solid grey perfect for main headings, primary calls to action, or dominant structural elements that require strong visual presence.

secondary

#606060 - A versatile medium-dark grey, ideal for subheadings, navigation, or secondary information panels, offering good contrast with lighter tones.

accent

#E0E0E0 - A very light, almost white, grey that serves as an excellent highlight color, for backgrounds, or interactive states, providing crispness.

background

#A0A0A0 - A balanced medium-light grey providing a comfortable and neutral canvas, ensuring good readability for both darker and lighter text.

text

#101010 - A deep, near-black grey ensuring maximum legibility and strong contrast for all body text against lighter backgrounds like #E0E0E0 or #A0A0A0.

Accessibility notes

Ensure #101010 text on #E0E0E0 or #A0A0A0 backgrounds meets WCAG AA contrast standards for optimal readability.
Avoid using #606060 text on #A0A0A0 backgrounds for critical information due to potentially insufficient contrast.
Use #E0E0E0 for text only against very dark backgrounds such as #101010 or #303030 to maintain legibility.
Verify that interactive elements have clear focus states beyond color, especially with subtle grey variations.

Recommended combinations

High Contrast Read

Ideal for a clean, highly readable interface, using dark text on a bright background, with a mid-grey for secondary elements.

#101010 · #E0E0E0 · #606060

Layered Structure

Creates a sophisticated, layered look suitable for dashboards or complex UIs, using varied grey tones to define sections and hierarchy.

#A0A0A0 · #303030 · #606060

Modern Accent

Excellent for a sharp, contemporary aesthetic, using the light grey as a canvas, dark for headings, and a slightly lighter dark for body text.

#E0E0E0 · #101010 · #303030

CSS variables

:root {
  --urban-grid-rhythm-1: #E0E0E0;
  --urban-grid-rhythm-2: #A0A0A0;
  --urban-grid-rhythm-3: #606060;
  --urban-grid-rhythm-4: #303030;
  --urban-grid-rhythm-5: #101010;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grid-rhythm": {
        1: "#E0E0E0",
        2: "#A0A0A0",
        3: "#606060",
        4: "#303030",
        5: "#101010",
      }
    }
  }
}

Hex values

Color 1#E0E0E0

Color 2#A0A0A0

Color 3#606060

Color 4#303030

Color 5#101010

Accessibility

Contrast checker

2:1Fail

4.8:1AA

10:1AAA

14.4:1AAA

2:1Fail

2.4:1Fail

5:1AA

7.3:1AAA

4.8:1AA

2.4:1Fail

2.1:1Fail

3:1AA18

10:1AAA

5:1AA

2.1:1Fail

1.4:1Fail

14.4:1AAA

7.3:1AAA

3:1AA18

1.4:1Fail

Similar palettes

More like Urban Grid Rhythm

View all monochrome

Concrete Jungle Bloom

Grayscale Metropolis Grid

Monochrome City Sketch

Urban Concrete Jungle

Urban Concrete Sky

City Grayscale View