Palette

Steel Rust Patina

Gritty greys and rusty browns depict the textures of industrial decay and weathered urban structures.

neutraldark5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Steel Rust Patina 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 Steel Rust Patina.

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

Data visualization

#3A3B3C#6B6E70#9D9D9C#8B4513#2D3436

Palette guide

How to use Steel Rust Patina

Overview

The Steel Rust Patina palette evokes the raw, weathered aesthetic of industrial decay and urban grit, blending deep grays with a striking, earthy rust. Featuring a rich, dark charcoal #2D3436 and a prominent rust brown #8B4513, alongside versatile grays like #3A3B3C and #6B6E70, this collection offers a unique, moody character. Designers can harness these hex codes to create evocative branding, industrial-themed interfaces, or dramatic editorial designs. Developers will find this palette excellent for crafting immersive dark mode experiences, rugged website designs, or applications that require a robust, textured visual identity that feels authentic and grounded.

Best used for

Vintage or grunge branding
Industrial-themed cafes/restaurants
Dark mode UI/UX design
Urban photography websites
Game design environments
Masculine product packaging

Suggested color roles

primary

#2D3436 - A very dark, almost black gray, serving as a powerful background or primary color for bold elements.

secondary

#3A3B3C - A deep charcoal gray, suitable for secondary backgrounds, content panels, or subtle divisions.

accent

#8B4513 - A rich, earthy rust brown, providing a striking accent for calls-to-action, highlights, or key information.

background

#6B6E70 - A mid-tone gray that can act as a unifying background, or for layering with darker elements.

text

#9D9D9C - A lighter gray that offers good readability on darker backgrounds, or use white text on #2D3436.

Accessibility notes

Ensure #9D9D9C text on #2D3436 or #3A3B3C provides sufficient contrast for readability.
The rust color #8B4513 is vibrant; ensure text placed on it is either very light or very dark for contrast.
Avoid using #6B6E70 text on #9D9D9C as contrast will be poor.
Use a contrast checker to validate all text and interactive element color combinations, especially with the rust accent.

Recommended combinations

Gritty Foundation

Establishes a dark, moody base with legible lighter text and a powerful rust accent for key interactive elements.

#2D3436 · #9D9D9C · #8B4513

Weathered Layers

Creates subtle depth and texture for layered backgrounds or cards, evoking the appearance of aged metal surfaces.

#3A3B3C · #6B6E70 · #9D9D9C

Rust Accent Dark

Ideal for dark interfaces where the rust provides a focal point, with mid-gray for secondary details or borders.

#2D3436 · #8B4513 · #6B6E70

CSS variables

:root {
  --steel-rust-patina-1: #3A3B3C;
  --steel-rust-patina-2: #6B6E70;
  --steel-rust-patina-3: #9D9D9C;
  --steel-rust-patina-4: #8B4513;
  --steel-rust-patina-5: #2D3436;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steel-rust-patina": {
        1: "#3A3B3C",
        2: "#6B6E70",
        3: "#9D9D9C",
        4: "#8B4513",
        5: "#2D3436",
      }
    }
  }
}

Hex values

Color 1#3A3B3C

Color 2#6B6E70

Color 3#9D9D9C

Color 4#8B4513

Color 5#2D3436

Accessibility

Contrast checker

2.2:1Fail

4.1:1AA18

1.6:1Fail

1.1:1Fail

2.2:1Fail

1.9:1Fail

1.4:1Fail

2.5:1Fail

4.1:1AA18

1.9:1Fail

2.6:1Fail

4.7:1AA

1.6:1Fail

1.4:1Fail

2.6:1Fail

1.8:1Fail

1.1:1Fail

2.5:1Fail

4.7:1AA

1.8:1Fail

Similar palettes

More like Steel Rust Patina