Back to palettes

Palette

Urban Industrial Grit

A no-nonsense grey palette, celebrating the raw and unrefined aesthetic of industrial spaces.

darkdark5 colors
More dark 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

#222222#444444#666666#888888#AAAAAA

Palette guide

How to use Urban Industrial Grit

Overview

The Urban Industrial Grit palette delivers a powerful, no-nonsense aesthetic, perfect for designs seeking a raw, unrefined edge. Dominated by a spectrum of deep to light greys, including the grounding #222222, the versatile #666666, and the subtle #AAAAAA, this collection evokes the concrete, metal, and shadows of urban industrial spaces. Designers can leverage its monochromatic strength for robust interfaces, strong branding, or atmospheric digital environments. Developers will find these shades reliable for consistent theme implementation, ensuring visual coherence across dark mode UIs or content-heavy platforms. Its inherent neutrality provides a solid foundation, allowing for subtle depth and texture without relying on vibrant hues.

Best used for

  • Industrial design portfolios and websites
  • Dark mode themes for web and mobile applications
  • Tech and gaming UI/UX with a sleek, minimalist feel
  • Branding for rugged, modern, or urban-inspired products
  • Architectural visualization and photography backdrops
  • Content-heavy platforms requiring a sophisticated, neutral aesthetic

Suggested color roles

primary

Use #222222 as the foundational dark base for main layouts, large headers, or hero sections to establish a strong, grounded presence.

secondary

Apply #444444 for secondary content blocks, card backgrounds, or prominent navigation elements, providing a clear visual hierarchy against the primary.

accent

Utilize #AAAAAA for subtle highlights, interactive states like hover effects, or small graphical elements to add a touch of light and visual interest without overpowering.

background

Employ #222222 for a deep, immersive dark mode background or #444444 for a slightly lighter, less intense backdrop that still maintains the industrial mood.

text

For optimal readability on dark backgrounds, use #AAAAAA or #888888 for body text, or a pure white/off-white for critical headings and calls to action.

Accessibility notes

  • Ensure sufficient contrast between text colors like #AAAAAA and darker backgrounds such as #222222 or #444444 to meet WCAG AA standards for readability.
  • When using #888888 or #666666 for UI elements, verify they stand out clearly against adjacent background shades to avoid low visibility.
  • Provide distinct focus indicators for interactive elements that use a lighter grey like #AAAAAA to ensure keyboard navigation is accessible.
  • Be mindful of using shades too close together for critical information; rely on size, weight, or spacing to differentiate elements, not just subtle color shifts.

Recommended combinations

Deep Contrast

Ideal for strong headings (#AAAAAA) on a dark background (#222222) with supporting details in a mid-tone (#666666), creating clear hierarchy.

#222222 · #AAAAAA · #666666

Subtle Gradient

Excellent for UI elements like cards or modals, where #444444 provides the base, #666666 for borders, and #888888 for subtle highlights or secondary text.

#444444 · #666666 · #888888

Industrial Text

Perfect for a dark background (#222222) with legible body text (#888888) and slightly darker, less prominent subheadings (#444444) for a sophisticated look.

#222222 · #888888 · #444444

CSS variables

:root {
  --urban-industrial-grit-4-1: #222222;
  --urban-industrial-grit-4-2: #444444;
  --urban-industrial-grit-4-3: #666666;
  --urban-industrial-grit-4-4: #888888;
  --urban-industrial-grit-4-5: #AAAAAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-industrial-grit-4": {
        1: "#222222",
        2: "#444444",
        3: "#666666",
        4: "#888888",
        5: "#AAAAAA",
      }
    }
  }
}

Related searches

industrial color palettegrey ui designdark mode grey palettemonochromatic industrial colorsurban grey color scheme

Palette colors

Hex values

Color 1#222222
·
Color 2#444444
·
Color 3#666666
·
Color 4#888888
·
Color 5#AAAAAA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.8:1Fail
4.5:1AA18
6.8:1AA
2
1.6:1Fail
1.7:1Fail
2.7:1Fail
4.2:1AA18
3
2.8:1Fail
1.7:1Fail
1.6:1Fail
2.5:1Fail
4
4.5:1AA18
2.7:1Fail
1.6:1Fail
1.5:1Fail
5
6.8:1AA
4.2:1AA18
2.5:1Fail
1.5:1Fail

Similar palettes

More like Urban Industrial Grit

View all dark
Urban Alley
Charcoal Depths
City Night Canvas
Factory Floor Rust
Industrial Grid Noir
Obsidian Crater Flow