Metropolis
#61584f
Cool, slightly muted gray for restrained UI contrast
About Metropolis
On my monitor, Metropolis looks like a city street at dusk: gray first, then a faint greenish coolness shows up when you put it beside warmer browns. It's darker than Kabul, but it doesn't tip into the heavy, anchored feeling of Heavy Charcoal. Compared to Caveman, it reads more composed and less lived-in, with a cleaner, steadier undertone.
I use it when I want the background to feel settled, not weighty. It's my go-to for product pages with readable media, admin shells, and systems where type needs to stay crisp over UI panels. It fits dashboards and finance apps, but it avoids the muted taupe-brown softness Kabul brings, so controls look sharper and less dusty. In contrast to Heavy Charcoal, Metropolis has a little less warmth at the edges, so it doesn't fight cool icons or photography.
Pair it with near-black text and slightly muted accent colors. If you throw in very warm reds or rusts, it can start to look a touch cooler than you expected.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.