Back to palettes

Palette

Urban Industrial Grit

A stark and raw palette inspired by concrete, steel, and shadows of urban industrial spaces.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D9D9D9#A6A6A6#737373#404040#1A1A1A

Palette guide

How to use Urban Industrial Grit

Overview

The Urban Industrial Grit palette offers a stark, raw aesthetic, perfect for designs inspired by concrete, steel, and urban landscapes. Featuring a range of deep neutrals from the light #D9D9D9 to the intense #1A1A1A, with versatile mid-tones like #737373, this collection provides a robust foundation for minimalist and modern applications. Designers and developers can leverage its inherent subtlety to create sophisticated interfaces, brutalist branding, or impactful digital experiences that evoke strength and resilience. This palette is ideal for projects requiring a no-nonsense, functional, yet deeply atmospheric visual identity. Its monochromatic nature ensures harmony, while varied luminance provides ample contrast opportunities for UI elements and content hierarchy.

Best used for

  • Industrial-themed web interfaces and applications
  • Modern architectural and engineering firm branding
  • Dark mode user interfaces for tech products
  • Minimalist product design and packaging
  • Gritty urban photography portfolios
  • Content-heavy platforms requiring a clean, focused aesthetic

Suggested color roles

primary

#404040. Use this deep charcoal as the primary structural color for main panels, navigation bars, or dominant content blocks in a darker theme.

secondary

#737373. A versatile mid-grey, ideal for secondary content areas, dividers, or subtle background elements that need to recede slightly.

accent

#D9D9D9. This light grey serves as an excellent accent against darker tones, perfect for highlights, active states, or small interactive elements.

background

#1A1A1A. Employ this near-black for a strong, immersive dark background, providing a canvas that makes lighter elements pop.

text

#D9D9D9. For optimal readability against a dark background like #1A1A1A or #404040, use this light grey for body text and headings.

Accessibility notes

  • Ensure sufficient contrast when pairing mid-tones like #A6A6A6 with #737373 for text, favoring higher contrast combinations.
  • The lightest color #D9D9D9 offers excellent contrast against the darkest #1A1A1A, suitable for primary text and interactive elements.
  • Avoid using colors too close in luminance for text and background to maintain readability, especially for small font sizes.
  • Always test text legibility on various screen types and lighting conditions, particularly for #A6A6A6 on #404040.

Recommended combinations

Urban Contrast

Ideal for high-contrast hero sections, primary calls-to-action, or striking UI elements that demand attention.

#D9D9D9 · #1A1A1A · #737373

Subtle Depth

Perfect for creating nuanced visual hierarchy within content blocks, card backgrounds, or subtle gradients that add dimension.

#A6A6A6 · #737373 · #404040

Gritty Base

Excellent for dark mode themes, providing a strong base with clear highlights for text, icons, and interactive components.

#1A1A1A · #D9D9D9 · #A6A6A6

CSS variables

:root {
  --urban-industrial-grit-1: #D9D9D9;
  --urban-industrial-grit-2: #A6A6A6;
  --urban-industrial-grit-3: #737373;
  --urban-industrial-grit-4: #404040;
  --urban-industrial-grit-5: #1A1A1A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-industrial-grit": {
        1: "#D9D9D9",
        2: "#A6A6A6",
        3: "#737373",
        4: "#404040",
        5: "#1A1A1A",
      }
    }
  }
}

Related searches

industrial grey color schememodern concrete paletteminimalist dark theme colorsurban design color inspirationsteel grey aesthetic hex codes

Palette colors

Hex values

Color 1#D9D9D9
·
Color 2#A6A6A6
·
Color 3#737373
·
Color 4#404040
·
Color 5#1A1A1A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.4:1AA18
7.3:1AAA
12.3:1AAA
2
1.7:1Fail
1.9:1Fail
4.3:1AA18
7.1:1AAA
3
3.4:1AA18
1.9:1Fail
2.2:1Fail
3.7:1AA18
4
7.3:1AAA
4.3:1AA18
2.2:1Fail
1.7:1Fail
5
12.3:1AAA
7.1:1AAA
3.7:1AA18
1.7:1Fail

Similar palettes

More like Urban Industrial Grit

View all neutral
City Concrete Grind
Gritty Urban Canvas
Industrial Urban Grit
Urban Alley Canvas
Urban Bloom Concrete
Urban Concrete Grays