Back to palettes

Palette

Urban Gridline Grey

A sleek, sophisticated grayscale palette reflecting the concrete and steel of modern urban landscapes.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Gridline Grey 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 Gridline Grey.

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

Data visualization

#2B2B2B#515151#7A7A7A#A3A3A3#D0D0D0

Palette guide

How to use Urban Gridline Grey

Overview

The Urban Gridline Grey palette offers a sleek, sophisticated grayscale collection reflecting the concrete and steel of modern urban landscapes. This palette spans from the deep charcoal #2B2B2B to the bright #D0D0D0, including balanced mid-tones like #515151, #7A7A7A, and #A3A3A3. It's an impeccable choice for designers and developers aiming to create a clean, robust, and elegant aesthetic. The consistent tonal progression ensures excellent visual harmony and provides ample contrast opportunities for clear functional design. This monochrome palette is inherently strong and versatile, perfect for conveying precision and a contemporary feel.

Best used for

  • Modern corporate websites
  • Architectural firm branding
  • Minimalist app interfaces
  • Industrial product design
  • Photography portfolios with a clean look
  • Technical documentation layouts

Suggested color roles

primary

#2B2B2B - A deep, authoritative charcoal grey, serving as a powerful primary color for headings, backgrounds, or dominant structural elements.

secondary

#515151 - A dark, solid grey, excellent for subheadings, navigation, or secondary content areas, providing strong visual weight.

accent

#D0D0D0 - A very light grey, almost white, perfect for subtle highlights, interactive states (hover/active), or delicate separators, adding crispness.

background

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

text

#2B2B2B - The deep charcoal ensures maximum legibility and strong contrast for all body text against lighter backgrounds like #D0D0D0 or #A3A3A3.

Accessibility notes

  • Ensure #2B2B2B text on #D0D0D0 or #A3A3A3 backgrounds meets WCAG AA contrast standards for readability.
  • Avoid using #7A7A7A text on #A3A3A3 backgrounds for critical information due to potentially low contrast.
  • Use #D0D0D0 for text only against very dark backgrounds such as #2B2B2B or #515151 to maintain legibility.
  • Verify that interactive elements have clear focus states beyond color, especially with subtle grey variations.

Recommended combinations

Strong Contrast

Ideal for a bold, readable interface, using dark text on a bright background, with a mid-grey for secondary elements or dividers.

#2B2B2B · #D0D0D0 · #7A7A7A

Layered Harmony

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

#A3A3A3 · #515151 · #7A7A7A

Modern Clean

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

#D0D0D0 · #2B2B2B · #515151

CSS variables

:root {
  --urban-gridline-grey-1: #2B2B2B;
  --urban-gridline-grey-2: #515151;
  --urban-gridline-grey-3: #7A7A7A;
  --urban-gridline-grey-4: #A3A3A3;
  --urban-gridline-grey-5: #D0D0D0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-gridline-grey": {
        1: "#2B2B2B",
        2: "#515151",
        3: "#7A7A7A",
        4: "#A3A3A3",
        5: "#D0D0D0",
      }
    }
  }
}

Related searches

sleek grey color paletteurban concrete colorsmodern industrial greymonochrome UI designarchitectural dark grey

Palette colors

Hex values

Color 1#2B2B2B
·
Color 2#515151
·
Color 3#7A7A7A
·
Color 4#A3A3A3
·
Color 5#D0D0D0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.3:1AA18
5.6:1AA
9.2:1AAA
2
1.8:1Fail
1.8:1Fail
3.1:1AA18
5.1:1AA
3
3.3:1AA18
1.8:1Fail
1.7:1Fail
2.8:1Fail
4
5.6:1AA
3.1:1AA18
1.7:1Fail
1.6:1Fail
5
9.2:1AAA
5.1:1AA
2.8:1Fail
1.6:1Fail

Similar palettes

More like Urban Gridline Grey

View all monochrome
Concrete Brutalism Form
Grayscale Urban Loft
Monochrome City Grid
Urban Alley Glow
Urban Concrete Flow
Urban Graphite