Palette

Industrial Grunge Fade

A raw, urban blend of grays and off-whites, echoing the gritty textures and fading light of an industrial space.

NeutralMinimal5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#333333#666666#999999#CCCCCC#F0F0F0

Palette guide

How to use Industrial Grunge Fade

Overview

The "Industrial Grunge Fade" palette offers a raw, urban blend of grays and off-whites, echoing the gritty textures and fading light of an industrial space. Ranging from the deep charcoal #333333 to the soft, near-white #F0F0F0, this palette provides a versatile gradient for minimalist and concrete-inspired designs. #666666 and #999999 serve as excellent mid-tones for layered interfaces, while #CCCCCC acts as a gentle highlight or background for content blocks. Ideal for projects that require a muted, sophisticated, and slightly weathered aesthetic, this palette facilitates clean readability while maintaining a strong, unpolished character.

Best used for

Minimalist architecture firm websites
Urban lifestyle blogs
Concrete texture art showcases
Dark mode application themes
Photography portfolio backgrounds
Industrial-chic interior design concepts

Suggested color roles

primary

A strong, dark base for backgrounds or primary content areas. Use #333333 to anchor the design with depth.

secondary

A versatile mid-gray for panels, borders, or secondary information. Apply #666666 to create subtle visual breaks.

accent

A soft, light gray for highlights, interactive elements, or backgrounds for focused content. #F0F0F0 provides a clean contrast.

background

A deep, grounding gray. #333333 offers a sophisticated backdrop that makes lighter elements stand out.

text

For primary text, #F0F0F0 provides excellent readability on #333333 or #666666. For secondary text, #CCCCCC can be used on #333333.

Accessibility notes

Ensure #F0F0F0 text on #333333 or #666666 backgrounds meets WCAG AA contrast standards.
Avoid using #999999 text on #CCCCCC backgrounds for body text due to insufficient contrast.
For interactive elements, ensure distinct visual feedback beyond color, especially with similar mid-grays.
Consider using a pure black or very dark charcoal text on #F0F0F0 for maximum readability in headings.

Recommended combinations

Grungy Base

Excellent for dark mode UI, using #333333 as background, #666666 for cards, and #F0F0F0 for main text.

#333333 · #666666 · #F0F0F0

Faded Layers

Creates a subtle, atmospheric gradient for section dividers, progress bars, or layered content.

#666666 · #999999 · #CCCCCC

Light Contrast

Use #CCCCCC for secondary backgrounds or borders, with #F0F0F0 for text, offering a clean, readable contrast against #333333.

#333333 · #CCCCCC · #F0F0F0

CSS variables

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

Tailwind config

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

Hex values

Color 1#333333

Color 2#666666

Color 3#999999

Color 4#CCCCCC

Color 5#F0F0F0

Accessibility

Contrast checker

2.2:1Fail

4.4:1AA18

7.9:1AAA

11.1:1AAA

2.2:1Fail

2:1Fail

3.6:1AA18

5: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.1:1AAA

5:1AA

2.5:1Fail

1.4:1Fail

Similar palettes

More like Industrial Grunge Fade

Urban Concrete Jungle

Zen Stone Garden