Back to palettes

Palette

Urban Foundry

Cool grays and silvers that reflect the raw, sturdy aesthetic of an industrial urban landscape.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#708090#B0C4DE#C0C0C0#DCDCDC

Palette guide

How to use Urban Foundry

Overview

The Urban Foundry palette presents a collection of cool grays and silvers that reflect the raw, sturdy aesthetic of an industrial urban landscape. Ranging from the deep, sophisticated #2F4F4F to the bright, clean #DCDCDC, this palette offers a versatile foundation for designs that require a modern, minimalist, and robust feel. Developers will find these hex codes excellent for building structured, clean user interfaces with clear visual hierarchy. The cool undertones of colors like #708090 provide a professional yet approachable quality, making it suitable for a wide array of applications from technology branding to architectural visualization. This palette ensures strong readability and a timeless appeal, ideal for projects emphasizing durability and contemporary design.

Best used for

  • Technology company branding and interfaces
  • Industrial product design websites
  • Modern architectural firm portfolios
  • Urban planning and development presentations
  • Minimalist e-commerce platforms
  • Data visualization dashboards

Suggested color roles

primary

Utilize #2F4F4F for strong, foundational elements like headers, footers, or primary navigation, establishing a sense of depth and seriousness.

secondary

Apply #708090 for subheadings, secondary buttons, or larger content blocks, offering a versatile mid-grey that complements the primary.

accent

Introduce #B0C4DE sparingly for interactive states, subtle dividers, or graphic elements to add a touch of cool lightness and contrast.

background

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

text

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

Accessibility notes

  • Ensure sufficient contrast between #2F4F4F text and #DCDCDC background (WCAG AA compliant).
  • Avoid using #B0C4DE for small text on #C0C0C0 as contrast may be insufficient.
  • Large text in #708090 on #DCDCDC offers good readability and a balanced appearance.
  • For critical information, always pair the darkest color, #2F4F4F, with the lightest, #DCDCDC.

Recommended combinations

Industrial Cool

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

#2F4F4F · #DCDCDC · #708090

Silvered Modern

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

#708090 · #B0C4DE · #C0C0C0

Robust Base

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

#2F4F4F · #708090 · #DCDCDC

CSS variables

:root {
  --urban-foundry-1: #2F4F4F;
  --urban-foundry-2: #708090;
  --urban-foundry-3: #B0C4DE;
  --urban-foundry-4: #C0C0C0;
  --urban-foundry-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-foundry": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#B0C4DE",
        4: "#C0C0C0",
        5: "#DCDCDC",
      }
    }
  }
}

Related searches

cool grey color schemeindustrial silver palettemodern minimalist UIconcrete metal design colorsurban architecture palette

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#708090
·
Color 3#B0C4DE
·
Color 4#C0C0C0
·
Color 5#DCDCDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
5:1AA
4.9:1AA
6.5:1AA
2
2.2:1Fail
2.3:1Fail
2.2:1Fail
3:1Fail
3
5:1AA
2.3:1Fail
1:1Fail
1.3:1Fail
4
4.9:1AA
2.2:1Fail
1:1Fail
1.3:1Fail
5
6.5:1AA
3:1Fail
1.3:1Fail
1.3:1Fail

Similar palettes

More like Urban Foundry

View all neutral
Silent Concrete Minimal
Urban Canvas Grey
Urban Grunge Concrete
City Concrete Grind
Concrete Grid Lines
Concrete Jungle