Back to palettes

Palette

Urban Industrial Grit

Rugged and resilient shades of steel and concrete, capturing the gritty essence of industrial cityscapes.

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

#3A4750#5B6B75#7F8D97#A5B2BC#CEDAE0

Palette guide

How to use Urban Industrial Grit

Overview

The Urban Industrial Grit palette offers a sophisticated range of robust, minimalist greys, perfectly capturing the essence of steel and concrete. Featuring core shades like #3A4750 (a deep, dark grey), #5B6B75 (a versatile mid-tone), and #CEDAE0 (a light, airy concrete hue), this palette provides a strong, modern foundation for any design project. Designers will find its muted yet powerful tones ideal for creating sophisticated user interfaces, strong brand identities, or architectural visualizations. Developers can rely on these consistent hex codes to build cohesive and professional digital experiences, ensuring a sleek and functional aesthetic that resonates with industrial and urban themes. The subtle blue undertones add depth, preventing the palette from feeling flat.

Best used for

  • Industrial design portfolios
  • Architectural firm websites
  • Modern tech startup branding
  • Automotive design mockups
  • Urban photography galleries
  • Minimalist e-commerce platforms

Suggested color roles

primary

#3A4750 - A deep, anchoring shade perfect for prominent headers, navigation bars, or strong brand elements, establishing a solid foundation.

secondary

#5B6B75 - A versatile mid-tone ideal for subheadings, card backgrounds, or interactive elements, providing good visual separation.

accent

#7F8D97 - A slightly lighter, more subtle accent for call-to-action buttons, icons, or progress indicators, offering gentle emphasis.

background

#CEDAE0 - A very light, airy shade suitable for main content areas or expansive backgrounds, ensuring readability and a clean aesthetic.

text

#3A4750 - Excellent for dark text on light backgrounds like #CEDAE0, ensuring strong readability. For light text on darker shades, consider a near-white like #F0F0F0.

Accessibility notes

  • Ensure sufficient contrast when using lighter shades like #A5B2BC for text on #CEDAE0 backgrounds; aim for AAA ratings for critical content.
  • Using #3A4750 for body text on a #CEDAE0 background provides excellent readability and meets accessibility standards.
  • Avoid placing #A5B2BC directly on #7F8D97 for important information due to potential low contrast issues.
  • For interactive elements, always ensure hover and focus states have distinct contrast changes to aid users with visual impairments.

Recommended combinations

Deep Contrast

Ideal for strong headlines on light backgrounds, with the mid-tone for secondary information or dividers, creating clear hierarchy.

#3A4750 · #CEDAE0 · #5B6B75

Subtle Depth

Great for creating layered UI elements or subtle visual hierarchy, such as cards with slightly varied background shades.

#5B6B75 · #A5B2BC · #7F8D97

Urban Core

A balanced trio for primary branding, navigation, and main content areas, providing a cohesive and authentic industrial feel.

#3A4750 · #7F8D97 · #CEDAE0

CSS variables

:root {
  --urban-industrial-grit-3-1: #3A4750;
  --urban-industrial-grit-3-2: #5B6B75;
  --urban-industrial-grit-3-3: #7F8D97;
  --urban-industrial-grit-3-4: #A5B2BC;
  --urban-industrial-grit-3-5: #CEDAE0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-industrial-grit-3": {
        1: "#3A4750",
        2: "#5B6B75",
        3: "#7F8D97",
        4: "#A5B2BC",
        5: "#CEDAE0",
      }
    }
  }
}

Related searches

industrial grey color paletteurban concrete colorssteel grey design paletteminimalist dark grey schememodern architecture color codes

Palette colors

Hex values

Color 1#3A4750
·
Color 2#5B6B75
·
Color 3#7F8D97
·
Color 4#A5B2BC
·
Color 5#CEDAE0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
4.4:1AA18
6.7:1AA
2
1.7:1Fail
1.6:1Fail
2.5:1Fail
3.9:1AA18
3
2.8:1Fail
1.6:1Fail
1.6:1Fail
2.4:1Fail
4
4.4:1AA18
2.5:1Fail
1.6:1Fail
1.5:1Fail
5
6.7:1AA
3.9:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Urban Industrial Grit

View all dark
Charcoal Depths
City Night Concrete
Industrial Ember Glow
Industrial Grid Noir
Smokestack Iron Grind
Urban Grunge Soul