Back to palettes

Palette

Steel Frame Metropolis

Gritty greys and metallic tones reflect the raw, imposing strength of a city's steel infrastructure.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#303030#505050#707070#909090#B0B0B0

Palette guide

How to use Steel Frame Metropolis

Overview

The Steel Frame Metropolis palette delivers a powerful, monochromatic range of grays, capturing the raw strength and imposing presence of urban steel infrastructure. From the deep, almost black #303030 to the lighter, metallic #B0B0B0, this collection offers exceptional versatility for conveying sophistication and industrial elegance. Designers can leverage these hex codes, such as the balanced mid-gray #707070 and the darker #505050, to build robust user interfaces, architectural concept art, or branding that exudes confidence. Developers will find this palette perfect for creating dark mode themes, intricate UI elements, or simply establishing a clean, structured visual hierarchy that feels both modern and timeless.

Best used for

  • Automotive industry branding
  • High-tech product interfaces
  • Architectural visualization software
  • Urban photography portfolios
  • Industrial machinery design
  • Minimalist art direction

Suggested color roles

primary

#303030 - A strong, foundational dark gray, perfect for primary backgrounds, headers, or bold typography.

secondary

#505050 - A deep, versatile gray, ideal for secondary content areas, panels, or prominent UI components.

accent

#909090 - A lighter, more reflective gray, excellent for subtle highlights, interactive elements, or progress indicators.

background

#B0B0B0 - A light, airy gray, providing a clean canvas for content, especially when paired with darker text.

text

#303030 - Provides excellent contrast and readability for text on lighter backgrounds like #B0B0B0 or #909090.

Accessibility notes

  • Ensure text in #303030 on #B0B0B0 meets WCAG AA for readability.
  • Avoid placing text in #707070 on backgrounds like #909090 without checking contrast ratios.
  • For interactive elements, ensure hover/focus states provide clear visual feedback with sufficient contrast.
  • Consider larger font sizes for lighter gray text on lighter gray backgrounds to improve legibility.

Recommended combinations

Core Structure

Establishes a strong visual hierarchy with a dark base, light content area, and a mid-tone for division or emphasis.

#303030 · #B0B0B0 · #707070

Metallic Depth

Creates a sophisticated, layered effect for backgrounds, cards, or gradients, evoking polished metal surfaces.

#505050 · #707070 · #909090

Subtle Transitions

Ideal for soft transitions and subtle distinctions in UI elements, providing a refined, understated look.

#B0B0B0 · #909090 · #707070

CSS variables

:root {
  --steel-frame-metropolis-1: #303030;
  --steel-frame-metropolis-2: #505050;
  --steel-frame-metropolis-3: #707070;
  --steel-frame-metropolis-4: #909090;
  --steel-frame-metropolis-5: #B0B0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steel-frame-metropolis": {
        1: "#303030",
        2: "#505050",
        3: "#707070",
        4: "#909090",
        5: "#B0B0B0",
      }
    }
  }
}

Related searches

urban gray palettesteel texture colorsminimalist dark gray schemeindustrial monochrome hexmodern city design colors

Palette colors

Hex values

Color 1#303030
·
Color 2#505050
·
Color 3#707070
·
Color 4#909090
·
Color 5#B0B0B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.1:1AA18
6.1:1AA
2
1.6:1Fail
1.6:1Fail
2.5:1Fail
3.7:1AA18
3
2.7:1Fail
1.6:1Fail
1.6:1Fail
2.3:1Fail
4
4.1:1AA18
2.5:1Fail
1.6:1Fail
1.5:1Fail
5
6.1:1AA
3.7:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Steel Frame Metropolis

View all neutral
Concrete Jungle Bloom
Urban Concrete Bloom
Urban Steel Canyon
Architectural Concrete Edge
Bare Concrete Stillness
Charcoal Smolder