Back to palettes

Palette

Metropolis Grey

A clean and strong palette representing the stark, modern elegance of a bustling city's concrete structures.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#696969#A9A9A9#D3D3D3#778899#C0C0C0

Palette guide

How to use Metropolis Grey

Overview

The Metropolis Grey palette offers a clean and strong representation of a bustling city's concrete structures, embodying modern elegance. Featuring solid, reliable greys like #696969 and a cooler blue-grey in #778899, it provides a robust and versatile foundation. Lighter, airy shades such as #A9A9A9, #C0C0C0, and the pristine #D3D3D3 complete the collection, creating a cohesive and contemporary aesthetic. This palette is ideal for designers and developers aiming for a minimalist, urban, or professional feel, perfect for projects that demand clarity, strength, and a sophisticated, no-nonsense approach to design.

Best used for

  • Construction and engineering firm branding
  • Urban planning and infrastructure projects
  • Minimalist product packaging and industrial design
  • Data visualization platforms and dashboards
  • Contemporary art installations and galleries
  • Professional services websites and corporate reports

Suggested color roles

primary

Use #696969 as a solid, reliable primary color for strong headers, navigation, or key brand elements.

secondary

Employ #778899 as a cooler, supportive blue-grey for subheadings, accentuating details, or background sections.

accent

Apply #A9A9A9 for mid-light, subtle highlights, interactive elements, or to create visual separation.

background

Utilize #D3D3D3 as a light, clean base background to ensure optimal readability for darker text.

text

For optimal readability, use #696969 or a dark charcoal on lighter backgrounds like #D3D3D3.

Accessibility notes

  • Ensure sufficient contrast for text on backgrounds; #696969 on #D3D3D3 works well for readability.
  • Check contrast for #778899 when used as a background or text color, especially with similar tones.
  • Avoid using very light greys like #C0C0C0 for important text elements.
  • Verify interactive element states are clearly distinguishable with enough luminance difference.

Recommended combinations

Concrete Core

Creates a strong foundation for branding, architectural concepts, and primary content areas.

#696969 · #778899 · #D3D3D3

Urban Light

Ideal for soft UI elements, background textures, or adding subtle depth to interfaces.

#A9A9A9 · #C0C0C0 · #D3D3D3

Steel & Stone

Effective for establishing visual hierarchy, data points, or accentuating key information.

#696969 · #A9A9A9 · #778899

CSS variables

:root {
  --metropolis-grey-1: #696969;
  --metropolis-grey-2: #A9A9A9;
  --metropolis-grey-3: #D3D3D3;
  --metropolis-grey-4: #778899;
  --metropolis-grey-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "metropolis-grey": {
        1: "#696969",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#778899",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

modern grey paletteconcrete colors designurban architecture tonesminimalist neutral palettesleek professional grey

Palette colors

Hex values

Color 1#696969
·
Color 2#A9A9A9
·
Color 3#D3D3D3
·
Color 4#778899
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
3.7:1AA18
1.5:1Fail
3:1AA18
2
2.3:1Fail
1.6:1Fail
1.5:1Fail
1.3:1Fail
3
3.7:1AA18
1.6:1Fail
2.4:1Fail
1.2:1Fail
4
1.5:1Fail
1.5:1Fail
2.4:1Fail
2:1Fail
5
3:1AA18
1.3:1Fail
1.2:1Fail
2:1Fail

Similar palettes

More like Metropolis Grey

View all neutral
Urban Dawn Grey
Architectural Concrete Edge
Brutalist Bloom Grey
City Concrete Grind
Concrete Garden Grey
Concrete Jungle Bloom