Palette

Urban Foundry Grey

Reflects the robust and subdued tones of an old industrial complex, emphasizing its timeless, stark beauty.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#546A76#718792#ADB6C4#CCD5D6

Palette guide

How to use Urban Foundry Grey

Overview

The Urban Foundry Grey palette captures the robust and subdued tones of an industrial complex, offering a timeless, stark beauty. This collection ranges from the deep, anchoring #36454F to the light, airy #CCD5D6, with versatile mid-tones like #718792. It's ideal 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 platforms. The cool grey shades provide excellent opportunities for creating visual depth and hierarchy, ensuring that 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 design and engineering websites
Modern architecture portfolios
Tech startup branding (minimalist aesthetic)
Automotive or machinery company interfaces
Urban planning and development presentations
E-commerce for minimalist fashion or home goods

Suggested color roles

primary

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

secondary

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

accent

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

background

Utilize #CCD5D6 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 #CCD5D6 to ensure maximum readability and a cohesive, professional look.

Accessibility notes

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

Recommended combinations

Stark Contrast

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

#36454F · #CCD5D6 · #718792

Subtle Depth

Ideal for a softer, more nuanced aesthetic, pairing medium and light greys for content blocks or secondary sections.

#546A76 · #ADB6C4 · #CCD5D6

Industrial 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 · #546A76 · #CCD5D6

CSS variables

:root {
  --urban-foundry-grey-1: #36454F;
  --urban-foundry-grey-2: #546A76;
  --urban-foundry-grey-3: #718792;
  --urban-foundry-grey-4: #ADB6C4;
  --urban-foundry-grey-5: #CCD5D6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-foundry-grey": {
        1: "#36454F",
        2: "#546A76",
        3: "#718792",
        4: "#ADB6C4",
        5: "#CCD5D6",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#546A76

Color 3#718792

Color 4#ADB6C4

Color 5#CCD5D6

Accessibility

Contrast checker

1.7:1Fail

2.6:1Fail

4.8:1AA

6.6:1AA

1.7:1Fail

1.5:1Fail

2.8:1Fail

3.8:1AA18

2.6:1Fail

1.5:1Fail

1.8:1Fail

2.5:1Fail

4.8:1AA

2.8:1Fail

1.8:1Fail

1.4:1Fail

6.6:1AA

3.8:1AA18

2.5:1Fail

1.4:1Fail

Similar palettes

More like Urban Foundry Grey

View all neutral

Bare Concrete Stillness

Architectural Concrete Edge