Back to palettes

Palette

Urban Rust Decay

A gritty palette inspired by weathered metal, rust, and the stark concrete of an old industrial district.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Rust Decay 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 Urban Rust Decay.

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

Data visualization

#3A322C#6F453F#A66B57#E5A36A#5D5E5F

Palette guide

How to use Urban Rust Decay

Overview

The Urban Rust Decay palette captures the gritty essence of weathered metal, rust, and stark concrete found in old industrial zones. Designers and developers can leverage its dark, earthy tones to evoke a raw, authentic aesthetic. With a foundation of deep charcoal (#3A322C) and a contrasting muted gray (#5D5E5F), this palette introduces rich, warm rust hues like #6F453F, a vibrant #A66B57, and a brighter, aged orange #E5A36A. It's ideal for projects aiming for a sense of history, decay, and urban resilience, offering a robust visual narrative.

Best used for

  • Industrial-themed game environments
  • Brutalist architecture showcases
  • Dark mode UI with a vintage edge
  • Grungy brand identities
  • Album art for alternative music
  • Weathered photography backdrops

Suggested color roles

primary

Use #3A322C as the foundational dark, providing depth and a strong anchor for layouts and primary elements.

secondary

Employ #6F453F for secondary sections or bold statements, offering a deep, authentic rust tone.

accent

Highlight interactive elements or key information with #A66B57 or #E5A36A for a vibrant, aged focal point.

background

A deep #3A322C works as an excellent dark background, or use #5D5E5F for a slightly lighter, textured base.

text

Pair light text, such as white or a light gray, with darker backgrounds. Use #E5A36A for headings or calls to action against dark tones.

Accessibility notes

  • Ensure high contrast when using the lighter #E5A36A for text on darker backgrounds like #3A322C.
  • Avoid using #6F453F and #A66B57 for body text on similar mid-tone backgrounds, as readability may suffer.
  • For interactive elements, use distinct accent colors like #E5A36A against the darker neutrals.
  • Consider larger font sizes or bolding for text set in #A66B57 to improve legibility.

Recommended combinations

Gritty Base

Establishes a dark, stable base with a bright, warm highlight for calls to action or key data.

#3A322C · #5D5E5F · #E5A36A

Rust & Steel

Combines deep rust with a brighter metallic accent and a neutral gray for industrial textures.

#6F453F · #A66B57 · #5D5E5F

Warm Decay

Creates a rich, warm, and somewhat distressed feel, perfect for evocative imagery or vintage aesthetics.

#3A322C · #6F453F · #E5A36A

CSS variables

:root {
  --urban-rust-decay-1: #3A322C;
  --urban-rust-decay-2: #6F453F;
  --urban-rust-decay-3: #A66B57;
  --urban-rust-decay-4: #E5A36A;
  --urban-rust-decay-5: #5D5E5F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rust-decay": {
        1: "#3A322C",
        2: "#6F453F",
        3: "#A66B57",
        4: "#E5A36A",
        5: "#5D5E5F",
      }
    }
  }
}

Related searches

industrial color schemesgrunge aesthetic paletteweathered metal colorsurban decay designdark rustic palette

Palette colors

Hex values

Color 1#3A322C
·
Color 2#6F453F
·
Color 3#A66B57
·
Color 4#E5A36A
·
Color 5#5D5E5F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.9:1Fail
5.8:1AA
1.9:1Fail
2
1.6:1Fail
1.9:1Fail
3.8:1AA18
1.2:1Fail
3
2.9:1Fail
1.9:1Fail
2:1Fail
1.5:1Fail
4
5.8:1AA
3.8:1AA18
2:1Fail
3:1AA18
5
1.9:1Fail
1.2:1Fail
1.5:1Fail
3:1AA18

Similar palettes

More like Urban Rust Decay

View all dark
Distressed Concrete Grit
Smokestack Iron Grind
Urban Grime Chic
Urban Grunge Alley
Urban Grunge Soul
City Grunge Texture