Back to palettes

Palette

Urban Foundry Steel

A stark, muted palette inspired by the raw concrete and cold steel of an urban industrial landscape.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Foundry Steel 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 Foundry Steel.

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

Data visualization

#36454F#5A6269#8C949C#B7BEC4#DCE2E7

Palette guide

How to use Urban Foundry Steel

Overview

The Urban Foundry Steel palette offers a stark, muted collection inspired by the raw concrete and cold steel of an urban industrial landscape. This monochrome range features the deep, anchoring #36454F, a versatile mid-tone #8C949C, and the light, airy #DCE2E7. It's an excellent choice for designers aiming to convey strength, reliability, and a modern, minimalist aesthetic. Developers will find these hex codes highly practical for creating clean, structured user interfaces and consistent branding across various digital platforms. The cool grey shades provide ample opportunities for visual depth and hierarchy, ensuring content remains legible and impactful. This palette is perfectly suited for projects that require a grounded, sophisticated, and enduring visual identity, from digital applications to architectural renderings.

Best used for

  • Industrial machinery branding
  • Modern architectural visualization
  • Tech company websites (clean, robust feel)
  • Urban planning and infrastructure projects
  • Minimalist product design interfaces
  • Photography portfolios with an urban theme

Suggested color roles

primary

Use #36454F for strong, foundational elements like headers, footers, or primary navigation, creating a sense of solidity.

secondary

Apply #5A6269 for subheadings, secondary buttons, or larger content blocks, offering a versatile, slightly softer grey.

accent

Introduce #8C949C sparingly for interactive states, subtle dividers, or graphic elements to add detail without disrupting the minimalist feel.

background

Utilize #DCE2E7 as a clean, light background, providing excellent contrast for darker text and a fresh, open feel.

text

Choose #36454F for body text on light backgrounds like #DCE2E7 to ensure maximum readability and a cohesive, professional look.

Accessibility notes

  • Ensure sufficient contrast between #36454F text and #DCE2E7 background (WCAG AA compliant).
  • Avoid using #B7BEC4 for small text on #DCE2E7 as contrast may be insufficient.
  • Large text in #5A6269 on #DCE2E7 offers good readability and a softer appearance.
  • For critical information, always pair the darkest color, #36454F, with the lightest, #DCE2E7.

Recommended combinations

Steel Contrast

A powerful combination for main branding, using the darkest grey for text, the lightest for backgrounds, and a mid-tone for accents.

#36454F · #DCE2E7 · #8C949C

Metallic Gradient

Ideal for creating subtle visual transitions or content blocks, blending medium and light greys for a refined, metallic aesthetic.

#5A6269 · #B7BEC4 · #DCE2E7

Foundry Base

Emphasizes a grounded and structured feel, with the darkest grey as primary, a slightly lighter grey for secondary, and the lightest for background.

#36454F · #5A6269 · #DCE2E7

CSS variables

:root {
  --urban-foundry-steel-1: #36454F;
  --urban-foundry-steel-2: #5A6269;
  --urban-foundry-steel-3: #8C949C;
  --urban-foundry-steel-4: #B7BEC4;
  --urban-foundry-steel-5: #DCE2E7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-foundry-steel": {
        1: "#36454F",
        2: "#5A6269",
        3: "#8C949C",
        4: "#B7BEC4",
        5: "#DCE2E7",
      }
    }
  }
}

Related searches

industrial grey color schememodern concrete paletteminimalist grey UIcool neutral design colorsarchitectural grey palette

Palette colors

Hex values

Color 1#36454F
·
Color 2#5A6269
·
Color 3#8C949C
·
Color 4#B7BEC4
·
Color 5#DCE2E7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.2:1AA18
5.3:1AA
7.6:1AAA
2
1.6:1Fail
2:1Fail
3.3:1AA18
4.7:1AA
3
3.2:1AA18
2:1Fail
1.6:1Fail
2.4:1Fail
4
5.3:1AA
3.3:1AA18
1.6:1Fail
1.4:1Fail
5
7.6:1AAA
4.7:1AA
2.4:1Fail
1.4:1Fail

Similar palettes

More like Urban Foundry Steel

View all monochrome
Urban Concrete Flow
Urban Concrete Jungle
Urban Foundry Haze
Urban Grid Echo
City Grayscale View
City Steel Gleam