Back to palettes

Palette

Grayscale Metropolis Grid

Captures the stark, unadorned aesthetic of urban architecture and cold, steel structures.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Grayscale Metropolis Grid 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 Grayscale Metropolis Grid.

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

Data visualization

#212121#424242#616161#9E9E9E#BDBDBD

Palette guide

How to use Grayscale Metropolis Grid

Overview

The Grayscale Metropolis Grid palette captures the stark, unadorned aesthetic of urban architecture and cold steel structures, perfect for a minimalist and modern design. Ranging from the deep charcoal #212121 to the lighter #BDBDBD, with balanced mid-tones like #424242, #616161, and #9E9E9E, this palette provides a robust yet refined foundation. Designers and developers can utilize this collection to create clean, structured, and highly functional interfaces. It conveys a sense of efficiency, sophistication, and raw urban beauty, making it ideal for projects that require a strong, contemporary, and uncluttered visual identity.

Best used for

  • Architectural firm websites or portfolios
  • Tech startup branding and interfaces
  • Industrial design showcases
  • Urban planning or infrastructure project visualizations
  • Modern art installations digital presence
  • Minimalist e-commerce platforms

Suggested color roles

primary

Use #212121 for strong headers, primary navigation, or prominent UI elements to establish a bold, modern anchor.

secondary

Apply #424242 for content backgrounds, subheadings, or secondary buttons, offering a slightly softer yet deep tone.

accent

#9E9E9E or #BDBDBD can serve as subtle accents for borders, dividers, or interactive states, providing gentle highlights.

background

#424242 or #616161 works well for main backgrounds, offering depth without being overly dark.

text

For primary text on lighter backgrounds, #212121 provides excellent contrast. On darker greys, use #BDBDBD or a near-white.

Accessibility notes

  • Ensure #212121 text on #BDBDBD background meets WCAG AA contrast for body text.
  • Be cautious using #9E9E9E text on #616161 background; contrast might be borderline for small text.
  • Provide clear focus indicators for interactive elements beyond subtle color shifts, such as underlines or icons.
  • Use sufficient font sizes and robust typefaces to enhance readability in a minimalist palette.

Recommended combinations

Urban Core

Ideal for primary branding and dark mode, combining a deep base with light text and a strong mid-tone.

#212121 · #BDBDBD · #424242

Grid Structure

Excellent for layering content, creating distinct sections, or building complex data visualizations with clear hierarchy.

#424242 · #616161 · #9E9E9E

Concrete Edge

Suited for light backgrounds with bold text and supporting elements, perfect for clean, high-contrast layouts.

#BDBDBD · #212121 · #616161

CSS variables

:root {
  --grayscale-metropolis-grid-1: #212121;
  --grayscale-metropolis-grid-2: #424242;
  --grayscale-metropolis-grid-3: #616161;
  --grayscale-metropolis-grid-4: #9E9E9E;
  --grayscale-metropolis-grid-5: #BDBDBD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grayscale-metropolis-grid": {
        1: "#212121",
        2: "#424242",
        3: "#616161",
        4: "#9E9E9E",
        5: "#BDBDBD",
      }
    }
  }
}

Related searches

urban grey paletteminimalist concrete colorsmodern monochrome schemeindustrial grey designcity grid color inspiration

Palette colors

Hex values

Color 1#212121
·
Color 2#424242
·
Color 3#616161
·
Color 4#9E9E9E
·
Color 5#BDBDBD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
6:1AA
8.6:1AAA
2
1.6:1Fail
1.6:1Fail
3.8:1AA18
5.3:1AA
3
2.6:1Fail
1.6:1Fail
2.3:1Fail
3.3:1AA18
4
6:1AA
3.8:1AA18
2.3:1Fail
1.4:1Fail
5
8.6:1AAA
5.3:1AA
3.3:1AA18
1.4:1Fail

Similar palettes

More like Grayscale Metropolis Grid

View all monochrome
Concrete Bloom Grey
Concrete Jungle Bloom
Concrete Jungle Canopy
Monochrome City Sketch
Pavement Abstract Greys
Urban Alley Glow