Palette

Urban Industrial Grit

A sturdy palette capturing the raw and textured essence of urban industrial landscapes.

monochromeminimal5 colors

More monochrome 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

#4C4F52#7D8083#B1B4B6#3B3E40#616467

Palette guide

How to use Urban Industrial Grit

Overview

The Urban Industrial Grit palette offers a robust and modern foundation for designs seeking a raw, sophisticated aesthetic. Dominated by a range of cool greys, from the deep charcoal of #3B3E40 to the subtle lightness of #B1B4B6, this collection evokes the sturdy textures of concrete and metal. Designers and developers will find these hues ideal for creating minimalist interfaces, architectural visualizations, or branding that conveys strength and reliability. The mid-tones like #4C4F52 and #7D8083 provide excellent versatility for gradients and layered elements, ensuring a cohesive and professional appearance across various digital and physical applications. This palette is perfect for projects demanding a grounded, contemporary feel.

Best used for

Architectural and interior design visualizations
Tech startup branding and websites
Minimalist user interface (UI) design
Industrial product design and packaging
Dark mode themes and applications
Photography backdrops and portfolio sites

Suggested color roles

primary

#3B3E40 - This very dark grey serves as a strong, grounding primary. Ideal for main backgrounds, navigation bars, or bold headers where a deep, authoritative presence is desired.

secondary

#4C4F52 - A versatile dark slate grey, perfect for secondary backgrounds, card elements, or prominent text. It provides a softer contrast than the primary, maintaining sophistication.

accent

#7D8083 - This balanced grey offers a subtle yet effective accent. Use it for interactive states, icons, progress indicators, or small graphical elements to add a touch of detail without overpowering the minimalist aesthetic.

background

#B1B4B6 - A clean, light grey providing an excellent canvas for content. It ensures readability and a sense of spaciousness, making it suitable for main content areas or lighter UI backgrounds.

text

#3B3E40 for dark text on light backgrounds like #B1B4B6, ensuring strong contrast. For dark interfaces, use #B1B4B6 as text color against backgrounds like #3B3E40 or #4C4F52 for optimal readability.

Accessibility notes

Ensure sufficient contrast when pairing #B1B4B6 text on #7D8083 backgrounds, as they are relatively close in luminance.
Always test text readability for smaller font sizes when using lighter greys like #7D8083 on #616467.
For critical information, use high-contrast pairings such as #B1B4B6 text on #3B3E40 or #4C4F52 backgrounds.
Avoid using mid-tone greys like #616467 for large blocks of body text without strong background contrast.

Recommended combinations

High Contrast UI

Ideal for bold, dark-themed user interfaces where #3B3E40 forms the base, #B1B4B6 provides clean text/elements, and #4C4F52 adds depth to secondary panels.

#3B3E40 · #B1B4B6 · #4C4F52

Subtle Layering

Create sophisticated depth and subtle gradients in backgrounds or layered components, allowing elements to recede or stand out gently.

#4C4F52 · #616467 · #7D8083

Clean Content Focus

Use #B1B4B6 as a dominant clean background, with #3B3E40 for primary text and headings, and #7D8083 for accents or secondary information.

#B1B4B6 · #3B3E40 · #7D8083

CSS variables

:root {
  --urban-industrial-grit-2-1: #4C4F52;
  --urban-industrial-grit-2-2: #7D8083;
  --urban-industrial-grit-2-3: #B1B4B6;
  --urban-industrial-grit-2-4: #3B3E40;
  --urban-industrial-grit-2-5: #616467;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-industrial-grit-2": {
        1: "#4C4F52",
        2: "#7D8083",
        3: "#B1B4B6",
        4: "#3B3E40",
        5: "#616467",
      }
    }
  }
}

Hex values

Color 1#4C4F52

Color 2#7D8083

Color 3#B1B4B6

Color 4#3B3E40

Color 5#616467

Accessibility

Contrast checker

2.1:1Fail

4:1AA18

1.3:1Fail

1.4:1Fail

2.1:1Fail

1.9:1Fail

2.7:1Fail

1.5:1Fail

4:1AA18

1.9:1Fail

5.2:1AA

2.9:1Fail

1.3:1Fail

2.7:1Fail

5.2:1AA

1.8:1Fail

1.4:1Fail

1.5:1Fail

2.9:1Fail

1.8:1Fail

Similar palettes

More like Urban Industrial Grit