Back to palettes

Palette

Urban Foundry Haze

A stark and refined palette of muted greys, reflecting the raw, urban elegance of concrete and steel architecture.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4C4E50#73787B#A2A9AF#D2D8DD#2D3032

Palette guide

How to use Urban Foundry Haze

Overview

The Urban Foundry Haze palette offers a stark and refined collection of muted greys, reflecting the raw, urban elegance of concrete and steel architecture. This monochrome range moves from the deep #2D3032 to the light #D2D8DD, with versatile mid-tones like #A2A9AF. It's an excellent choice for designers aiming to convey sophistication, strength, and a minimalist aesthetic. Developers will find these hex codes straightforward to implement for creating clean, structured user interfaces and consistent branding across various digital platforms. The subtle variations within the grey spectrum provide ample opportunities for visual hierarchy without relying on strong color contrasts, ensuring a cohesive and professional appearance. This palette is highly adaptable for projects requiring a modern, understated, and enduring visual identity.

Best used for

  • Modern art gallery websites
  • Architectural firm portfolios
  • High-tech product showcases
  • Luxury automotive branding
  • Minimalist fashion e-commerce
  • Urban photography and design blogs

Suggested color roles

primary

Utilize #2D3032 for strong, foundational elements like headers, footers, or primary navigation, establishing depth and sophistication.

secondary

Apply #4C4E50 for subheadings, secondary buttons, or large content blocks, offering a versatile, slightly lighter grey.

accent

Introduce #73787B sparingly for interactive states, subtle dividers, or graphic elements to add detail without disrupting the monochrome feel.

background

Employ #D2D8DD as a clean, light background, providing excellent contrast for darker text and a fresh, open ambiance.

text

Choose #2D3032 for body text on light backgrounds like #D2D8DD to ensure maximum readability and a cohesive, professional look.

Accessibility notes

  • Ensure high contrast between #2D3032 text and #D2D8DD background (WCAG AA compliant).
  • Avoid using #A2A9AF for small text on #D2D8DD as contrast may be insufficient.
  • Large text in #4C4E50 on #D2D8DD offers good readability and a softer appearance.
  • For critical information, always pair the darkest color, #2D3032, with the lightest, #D2D8DD.

Recommended combinations

Monochrome Depth

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

#2D3032 · #D2D8DD · #73787B

Hazy Gradient

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

#4C4E50 · #A2A9AF · #D2D8DD

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.

#2D3032 · #4C4E50 · #D2D8DD

CSS variables

:root {
  --urban-foundry-haze-1: #4C4E50;
  --urban-foundry-haze-2: #73787B;
  --urban-foundry-haze-3: #A2A9AF;
  --urban-foundry-haze-4: #D2D8DD;
  --urban-foundry-haze-5: #2D3032;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-foundry-haze": {
        1: "#4C4E50",
        2: "#73787B",
        3: "#A2A9AF",
        4: "#D2D8DD",
        5: "#2D3032",
      }
    }
  }
}

Related searches

monochrome grey paletteurban concrete color schememinimalist dark grey UIindustrial modern colorssteel grey design palette

Palette colors

Hex values

Color 1#4C4E50
·
Color 2#73787B
·
Color 3#A2A9AF
·
Color 4#D2D8DD
·
Color 5#2D3032
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.5:1AA18
5.8:1AA
1.6:1Fail
2
1.9:1Fail
1.9:1Fail
3.1:1AA18
3:1Fail
3
3.5:1AA18
1.9:1Fail
1.7:1Fail
5.6:1AA
4
5.8:1AA
3.1:1AA18
1.7:1Fail
9.2:1AAA
5
1.6:1Fail
3:1Fail
5.6:1AA
9.2:1AAA

Similar palettes

More like Urban Foundry Haze

View all monochrome
Metal Sheen
Urban Concrete Flow
Urban Concrete Jungle
Urban Foundry Steel
Urban Grid Echo
Brushed Steel Aura