Palette

Industrial Grunge Wall

A stark, unpolished range of greys, reminiscent of concrete walls and weathered cityscapes.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Industrial Grunge Wall 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 Grunge Wall.

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

Data visualization

#333333#666666#999999#CCCCCC#F2F2F2

Palette guide

How to use Industrial Grunge Wall

Overview

The "Industrial Grunge Wall" palette presents a stark, unpolished range of grays, reminiscent of concrete walls and weathered cityscapes. Moving from the deep #333333 to the soft, almost white #F2F2F2, this collection offers a strong foundation for urban and modern minimalist designs. #666666 and #999999 provide versatile mid-tones, perfect for layering and adding textural depth to digital interfaces. The bright #CCCCCC and #F2F2F2 deliver clean contrast, ideal for readability. This palette is excellent for designers aiming to convey a sense of raw authenticity, structural integrity, and a clean, yet gritty, modern aesthetic.

Best used for

Concrete art and design portfolios
Urban fashion e-commerce sites
Modern architecture presentations
Gritty documentary film branding
Minimalist productivity apps
Industrial machinery product showcases

Suggested color roles

primary

A solid, deep charcoal for main backgrounds or structural elements. Use #333333 to establish a robust foundation.

secondary

A reliable mid-gray for panels, card borders, or subtle dividing lines. Apply #666666 for clear visual hierarchy.

accent

A crisp, light gray for highlights, interactive states, or clean content backgrounds. #F2F2F2 offers excellent visibility.

background

A commanding, dark gray. #333333 provides a strong, immersive canvas for lighter elements.

text

For primary text, #F2F2F2 offers superior readability on #333333 or #666666. For secondary text or captions, #999999 can be used on #333333.

Accessibility notes

Ensure #F2F2F2 text on #333333 or #666666 backgrounds meets WCAG AA contrast standards.
Avoid using #999999 text on #CCCCCC backgrounds as contrast will be insufficient for most uses.
For interactive elements, ensure sufficient visual cues beyond color alone, like border changes or iconography.
Consider using a very dark gray or black text on #F2F2F2 or #CCCCCC for headings to maximize readability.

Recommended combinations

Wall Structure

Ideal for constructing dark mode UI with #333333 as the base, #666666 for panels, and #F2F2F2 for primary text.

#333333 · #666666 · #F2F2F2

Layered Concrete

Excellent for creating subtle depth and layering in UI, mimicking concrete surfaces or stacked information cards.

#666666 · #999999 · #CCCCCC

Clean Contrast

Use #CCCCCC for secondary backgrounds or section headers, with #F2F2F2 for text, offering a stark, clean contrast.

#333333 · #CCCCCC · #F2F2F2

CSS variables

:root {
  --industrial-grunge-wall-1: #333333;
  --industrial-grunge-wall-2: #666666;
  --industrial-grunge-wall-3: #999999;
  --industrial-grunge-wall-4: #CCCCCC;
  --industrial-grunge-wall-5: #F2F2F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-grunge-wall": {
        1: "#333333",
        2: "#666666",
        3: "#999999",
        4: "#CCCCCC",
        5: "#F2F2F2",
      }
    }
  }
}

Hex values

Color 1#333333

Color 2#666666

Color 3#999999

Color 4#CCCCCC

Color 5#F2F2F2

Accessibility

Contrast checker

2.2:1Fail

4.4:1AA18

7.9:1AAA

11.3:1AAA

2.2:1Fail

2:1Fail

3.6:1AA18

5.1:1AA

4.4:1AA18

2:1Fail

1.8:1Fail

2.5:1Fail

7.9:1AAA

3.6:1AA18

1.8:1Fail

1.4:1Fail

11.3:1AAA

5.1:1AA

2.5:1Fail

1.4:1Fail

Similar palettes

More like Industrial Grunge Wall

View all monochrome

Urban Gritty Edge

Urban Cement Edge

Urban Graphite Canvas

Urban Grid Minimal

City Grayscale View

City Grid Graphite