Palette

Gritty Industrial Grey

Harsh and realistic tones reflecting the rugged beauty of an industrial landscape.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gritty Industrial Grey 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 Gritty Industrial Grey.

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

Data visualization

#36454F#C0C0C0#8B4513#606060#1A1A1A

Palette guide

How to use Gritty Industrial Grey

Overview

The Gritty Industrial Grey palette captures the rugged beauty of an industrial landscape with its harsh, realistic tones. This collection features deep charcoal #1A1A1A and #36454F, a striking metallic silver #C0C0C0, a warm, earthy #8B4513, and a balanced mid-gray #606060. It offers designers and developers a strong, grounded foundation for projects requiring a sense of durability, authenticity, and raw modernism. The inclusion of the warm brown provides an unexpected organic contrast to the cool, metallic grays, adding depth and versatility to an otherwise stark theme.

Best used for

Heavy industry and manufacturing websites
Modern architectural portfolios
Urban exploration or photography blogs
Men's fashion or rugged outdoor brands
Dark mode UI themes
Digital art with a raw, textured feel

Suggested color roles

primary

Use #1A1A1A for dominant backgrounds or robust structural elements, conveying strength and depth.

secondary

Employ #36454F for secondary content areas or darker text, providing a slightly softer but still impactful presence.

accent

The warm #8B4513 serves as an excellent accent for calls-to-action or key highlights, adding an organic touch.

background

A lighter gray like #C0C0C0 can provide a clean, metallic backdrop, or use #1A1A1A for a dramatic dark mode.

text

For dark backgrounds like #1A1A1A, use #C0C0C0 for body text. For lighter backgrounds, #1A1A1A ensures strong readability.

Accessibility notes

Ensure high contrast when using #C0C0C0 for text, especially against #606060 or #36454F, to meet WCAG AA standards.
The dark #1A1A1A provides excellent contrast for light text, making it suitable for primary text on light backgrounds or vice-versa.
Use #8B4513 with care for text; it may require a very light background like white or near-white for readability.
Test all color combinations, particularly for interactive elements, to ensure they are easily distinguishable.

Recommended combinations

Deep Foundations

Ideal for a dark UI theme, with #C0C0C0 providing clear, readable text against deep grays.

#1A1A1A · #36454F · #C0C0C0

Earthy Contrast

Great for highlighting key features or buttons, with #8B4513 providing a warm pop against cooler tones.

#606060 · #8B4513 · #C0C0C0

Metallic Strength

Perfect for headers or section titles, where #C0C0C0 offers a metallic sheen and #1A1A1A provides solid text contrast.

#36454F · #C0C0C0 · #1A1A1A

CSS variables

:root {
  --gritty-industrial-grey-1: #36454F;
  --gritty-industrial-grey-2: #C0C0C0;
  --gritty-industrial-grey-3: #8B4513;
  --gritty-industrial-grey-4: #606060;
  --gritty-industrial-grey-5: #1A1A1A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gritty-industrial-grey": {
        1: "#36454F",
        2: "#C0C0C0",
        3: "#8B4513",
        4: "#606060",
        5: "#1A1A1A",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#C0C0C0

Color 3#8B4513

Color 4#606060

Color 5#1A1A1A

Accessibility

Contrast checker

5.4:1AA

1.4:1Fail

1.6:1Fail

1.8:1Fail

5.4:1AA

3.9:1AA18

3.5:1AA18

9.6:1AAA

1.4:1Fail

3.9:1AA18

1.1:1Fail

2.5:1Fail

1.6:1Fail

3.5:1AA18

1.1:1Fail

2.8:1Fail

1.8:1Fail

9.6:1AAA

2.5:1Fail

2.8:1Fail

Similar palettes

More like Gritty Industrial Grey

Industrial Gear Grind

Industrial Noir Edge

Volcanic Rock Flow