Back to palettes

Palette

Industrial Grunge Edge

Rough and edgy, reflecting the raw, weathered textures of industrial environments.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#424A4F#6D7A84#9FB3BF#C8D0D6#2E363B

Palette guide

How to use Industrial Grunge Edge

Overview

The "Industrial Grunge Edge" palette (ID: industrial-grunge-edge) delivers a rough and edgy collection of cool blue-grays, reflecting the raw, weathered textures of industrial environments. Anchored by the deep, almost black-blue #2E363B and complemented by the steely #424A4F, this palette evokes concrete and aged metal. Lighter tones like #9FB3BF and #C8D0D6 introduce a sense of faded light or worn surfaces, perfect for adding depth and realism. Designers seeking a somber yet sophisticated aesthetic will find this palette excellent for conveying rugged authenticity and a strong, unpolished character in digital interfaces or branding.

Best used for

  • Heavy machinery manufacturer websites
  • Post-apocalyptic game environments
  • Urban exploration photography sites
  • Industrial art installations
  • Robust utility application UIs
  • Vintage-inspired tech branding

Suggested color roles

primary

A commanding, deep blue-gray for core structures and backgrounds. Use #2E363B to establish a strong, grounded presence.

secondary

A versatile, slightly lighter blue-gray for panels, headers, or prominent sections. Apply #424A4F for visual segmentation.

accent

A faded, lighter blue-gray for subtle highlights or secondary information. #C8D0D6 works well for text or interactive elements.

background

An immersive, deep blue-gray. #2E363B provides a serious and sophisticated backdrop.

text

For primary text, #C8D0D6 offers excellent readability on #2E363B or #424A4F. For secondary text, #9FB3BF can be used for softer contrast.

Accessibility notes

  • Ensure #C8D0D6 text on #2E363B or #424A4F backgrounds meets WCAG AA contrast standards.
  • Avoid using #6D7A84 text on #9FB3BF as contrast will be very poor.
  • For critical calls to action, consider a bright white text on #2E363B for maximum visibility.
  • The cool tones may require larger text or increased leading for optimal readability, especially with mid-range grays.

Recommended combinations

Deep Concrete

Ideal for dark mode applications, with #2E363B as background, #424A4F for panels, and #C8D0D6 for primary text.

#2E363B · #424A4F · #C8D0D6

Weathered Layers

Perfect for creating subtle gradients or layered textures, evoking worn metal and concrete surfaces in UI.

#424A4F · #6D7A84 · #9FB3BF

Faded Steel

Use #9FB3BF for headings or subdued highlights against the dark base, with #C8D0D6 for body text, creating a weathered look.

#2E363B · #9FB3BF · #C8D0D6

CSS variables

:root {
  --industrial-grunge-edge-1: #424A4F;
  --industrial-grunge-edge-2: #6D7A84;
  --industrial-grunge-edge-3: #9FB3BF;
  --industrial-grunge-edge-4: #C8D0D6;
  --industrial-grunge-edge-5: #2E363B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-grunge-edge": {
        1: "#424A4F",
        2: "#6D7A84",
        3: "#9FB3BF",
        4: "#C8D0D6",
        5: "#2E363B",
      }
    }
  }
}

Related searches

blue grey industrial colorsgrunge dark paletteweathered metal color schemeurban decay aesthetictechnical design colors

Palette colors

Hex values

Color 1#424A4F
·
Color 2#6D7A84
·
Color 3#9FB3BF
·
Color 4#C8D0D6
·
Color 5#2E363B
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
4.2:1AA18
5.8:1AA
1.4:1Fail
2
2.1:1Fail
2:1Fail
2.8:1Fail
2.8:1Fail
3
4.2:1AA18
2:1Fail
1.4:1Fail
5.7:1AA
4
5.8:1AA
2.8:1Fail
1.4:1Fail
7.9:1AAA
5
1.4:1Fail
2.8:1Fail
5.7:1AA
7.9:1AAA

Similar palettes

More like Industrial Grunge Edge

View all monochrome
Industrial Grunge Edge
Charcoal Smoke Hues
Foggy London Alley
Gritty Factory Floor
Gritty Industrial Grey
Industrial Gear Grind