Back to palettes

Palette

Industrial Urban Grit

Capturing the raw, modern aesthetic of concrete, steel, and urban textures.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#696969#A9A9A9#C0C0C0#708090#2F4F4F

Palette guide

How to use Industrial Urban Grit

Overview

The Industrial Urban Grit palette captures the raw, modern aesthetic of concrete, steel, and urban textures. Featuring versatile grays like #696969 and #A9A9A9, complemented by the slightly cooler #708090 and a deep teal-gray #2F4F4F, this collection is excellent for creating robust, no-nonsense designs. Designers and developers can leverage these shades to evoke strength, contemporary minimalism, and a grounded feel. It's perfect for structured interfaces and branding that demand a sense of durability and authenticity, reflecting a modern, unpolished elegance.

Best used for

  • Brutalist architecture websites and portfolios
  • Urban photography and art displays
  • Concrete product design and branding
  • Rugged outdoor gear and apparel branding
  • Minimalist fashion lookbooks
  • Industrial machinery user interfaces

Suggested color roles

primary

#2F4F4F serves as a deep, anchoring color for headers, strong backgrounds, or primary UI elements, providing gravitas.

secondary

#696969 is ideal for main content areas, darker text on light backgrounds, or supporting elements, adding substance.

accent

#C0C0C0 works well for subtle highlights, interactive elements, or to suggest a metallic sheen, drawing gentle attention.

background

#A9A9A9 offers a light, neutral base for content, ensuring good readability and a clean, open feel.

text

#2F4F4F provides dark, highly readable text on lighter backgrounds like #A9A9A9 or #C0C0C0, ensuring clarity.

Accessibility notes

  • Ensure #2F4F4F or #696969 text on #A9A9A9 or #C0C0C0 meets WCAG AA contrast standards.
  • Avoid using #708090 or #C0C0C0 for body text on #A9A9A9 due to insufficient contrast.
  • For critical information, use sufficiently dark text like #2F4F4F on lighter backgrounds.
  • Consider a pure black or white text alternative for optimal contrast on mid-tone backgrounds.

Recommended combinations

Concrete Base

Light base, mid-tone content, and dark accents for a grounded, modern UI.

#A9A9A9 · #696969 · #2F4F4F

Steel Layers

Deep anchor, cool mid-tone, and bright metallic highlight for layered industrial designs.

#2F4F4F · #708090 · #C0C0C0

Urban Contrast

Light background with varying shades of grey for depth and visual interest in content blocks.

#C0C0C0 · #696969 · #708090

CSS variables

:root {
  --industrial-urban-grit-1: #696969;
  --industrial-urban-grit-2: #A9A9A9;
  --industrial-urban-grit-3: #C0C0C0;
  --industrial-urban-grit-4: #708090;
  --industrial-urban-grit-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-urban-grit": {
        1: "#696969",
        2: "#A9A9A9",
        3: "#C0C0C0",
        4: "#708090",
        5: "#2F4F4F",
      }
    }
  }
}

Related searches

concrete color schemesgrey industrial paletteurban minimalist colorsmodern brutalist designrugged neutral palette

Palette colors

Hex values

Color 1#696969
·
Color 2#A9A9A9
·
Color 3#C0C0C0
·
Color 4#708090
·
Color 5#2F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
3:1AA18
1.4:1Fail
1.6:1Fail
2
2.3:1Fail
1.3:1Fail
1.7:1Fail
3.8:1AA18
3
3:1AA18
1.3:1Fail
2.2:1Fail
4.9:1AA
4
1.4:1Fail
1.7:1Fail
2.2:1Fail
2.2:1Fail
5
1.6:1Fail
3.8:1AA18
4.9:1AA
2.2:1Fail

Similar palettes

More like Industrial Urban Grit

View all neutral
City Concrete Grind
Urban Bloom Concrete
Urban Echo Canvas
Bare Concrete Stillness
Brutalist Bloom Grey
Concrete Canyon Dusk