Palette

Rustbelt Industrial Hue

Gritty and robust, reflecting the aged, metallic textures of a fading industrial landscape.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rustbelt Industrial Hue 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 Rustbelt Industrial Hue.

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

Data visualization

#4D4E5C#7A7F8C#AAB0BF#D3D8E0#2D2E38

Palette guide

How to use Rustbelt Industrial Hue

Overview

The Rustbelt Industrial Hue palette is a gritty and robust collection, perfectly reflecting the aged, metallic textures of a fading industrial landscape. This dark, stark palette is built upon a foundation of cool, muted blues and grays, starting with the deep, almost black #2D2E38. It transitions through the strong #4D4E5C and the versatile #7A7F8C, a mid-tone blue-gray. Lighter, airy tones include the sophisticated #AAB0BF and the very light, almost off-white #D3D8E0. Ideal for designers and developers seeking to evoke a sense of urban grit, modernist minimalism, or a weathered, sophisticated aesthetic, this palette excels in creating impactful branding, clean web interfaces, or atmospheric digital art that embraces a stark, metallic, and enduring character.

Best used for

Modern architectural firm branding
Tech startups with a minimalist aesthetic
Urban clothing lines or streetwear brands
Data visualization dashboards (dark mode)
Automotive or industrial machinery websites
Science fiction or dystopian game interfaces

Suggested color roles

primary

#2D2E38 - The darkest shade, ideal for dominant backgrounds, headers, or strong UI elements, establishing a deep, sophisticated, and serious tone.

secondary

#4D4E5C - A deep blue-gray that works well for subheadings, content sections, or secondary UI components, offering depth without being overwhelming.

accent

#7A7F8C - This versatile mid-tone blue-gray provides a subtle yet effective accent for interactive elements, borders, or to add visual interest.

background

#D3D8E0 - A very light, cool off-white that provides a clean, stark background, making darker text highly readable and emphasizing the palette's metallic feel.

text

#2D2E38 or a very dark charcoal. For light backgrounds like #D3D8E0, #2D2E38 offers excellent contrast and maintains the palette's cohesive, industrial look. For dark backgrounds, use white or light gray.

Accessibility notes

#D3D8E0 provides excellent contrast with the darker hues like #2D2E38 and #4D4E5C for body text.
When using darker colors (#2D2E38, #4D4E5C) as backgrounds, ensure text is white or a very light gray for readability.
Avoid using #AAB0BF for small text against #D3D8E0 due to insufficient contrast.
Always verify contrast ratios for all text and interactive elements to ensure WCAG compliance.

Recommended combinations

Stark Foundation

Creates a deep, robust, and modern foundation, ideal for headers, footers, or dark mode interfaces requiring strong contrast.

#2D2E38 · #4D4E5C · #7A7F8C

Metallic Gradients

Offers a lighter, airy feel for main content, with subtle metallic transitions and clear contrast for text.

#AAB0BF · #D3D8E0 · #4D4E5C

Urban Contrast

Suitable for showcasing details or secondary information, providing a balanced, modern aesthetic with clear readability.

#7A7F8C · #D3D8E0 · #2D2E38

CSS variables

:root {
  --rustbelt-industrial-hue-1: #4D4E5C;
  --rustbelt-industrial-hue-2: #7A7F8C;
  --rustbelt-industrial-hue-3: #AAB0BF;
  --rustbelt-industrial-hue-4: #D3D8E0;
  --rustbelt-industrial-hue-5: #2D2E38;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rustbelt-industrial-hue": {
        1: "#4D4E5C",
        2: "#7A7F8C",
        3: "#AAB0BF",
        4: "#D3D8E0",
        5: "#2D2E38",
      }
    }
  }
}

Hex values

Color 1#4D4E5C

Color 2#7A7F8C

Color 3#AAB0BF

Color 4#D3D8E0

Color 5#2D2E38

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

5.7:1AA

1.6:1Fail

2:1Fail

1.8:1Fail

2.8:1Fail

3.4:1AA18

3.8:1AA18

1.8:1Fail

1.5:1Fail

6.2:1AA

5.7:1AA

2.8:1Fail

1.5:1Fail

9.4:1AAA

1.6:1Fail

3.4:1AA18

6.2:1AA

9.4:1AAA

Similar palettes

More like Rustbelt Industrial Hue

View all dark

City Grunge Texture

Distressed Concrete Grit

Smokestack Iron Grind

Urban Grime Chic

Urban Grunge Alley

Urban Grunge Soul