Back to palettes

Palette

Urban Rust Grunge

Reflects the raw, weathered aesthetic of urban decay and industrial surfaces.

NeutralDark5 colors
More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A52A2A#696969#708090#2F4F4F#D3D3D3

Palette guide

How to use Urban Rust Grunge

Overview

The Urban Rust Grunge palette reflects the raw, weathered aesthetic of urban decay and industrial surfaces, perfect for designers seeking a powerful, gritty look. It grounds itself with deep, cool grays like #2F4F4F and #708090, complemented by a robust #696969. The palette introduces a striking, earthy #A52A2A, reminiscent of aged rust, and brightens with a distressed off-white #D3D3D3. This combination is highly effective for creating dark, moody interfaces, edgy branding, or immersive digital environments that evoke a sense of history, resilience, and unpolished authenticity.

Best used for

  • Grunge aesthetic web design
  • Industrial music branding and album art
  • Alternative fashion brand identity
  • Dark mode UI with a distressed feel
  • Urban exploration photography showcases
  • Gritty video game environments

Suggested color roles

primary

Utilize #2F4F4F as a strong, dark primary for backgrounds or main content areas, providing depth and a cool base.

secondary

Employ #708090 or #696969 for secondary sections, borders, or to add subtle variations within the dark theme.

accent

Introduce #A52A2A for powerful calls to action, warnings, or to add a striking, earthy contrast.

background

Dark grays like #2F4F4F or #696969 are ideal for creating a moody, deep background.

text

For dark backgrounds, use #D3D3D3 or white for body text. For headings, #A52A2A can be used against very light backgrounds.

Accessibility notes

  • Ensure high contrast when using #D3D3D3 for text on darker backgrounds like #2F4F4F, #696969, or #708090.
  • Avoid using #A52A2A for small body text on dark grays; it may lack sufficient contrast. Reserve it for larger elements or accents.
  • For interactive elements, ensure distinct visual cues, perhaps by pairing #A52A2A with a strong border of #D3D3D3.
  • When using multiple dark grays, ensure enough luminance difference for visual separation, especially for borders or dividers.

Recommended combinations

Gritty Base

Establishes a dark, robust base with a bright, distressed highlight and a bold rust accent for impact.

#2F4F4F · #D3D3D3 · #A52A2A

Industrial Blend

Combines mid-tone grays with a striking rust, ideal for conveying aged metal or concrete textures.

#696969 · #708090 · #A52A2A

Distressed Light

Utilizes the light gray as a primary, balanced by dark grays for a cleaner yet still gritty aesthetic.

#D3D3D3 · #2F4F4F · #708090

CSS variables

:root {
  --urban-rust-grunge-1: #A52A2A;
  --urban-rust-grunge-2: #696969;
  --urban-rust-grunge-3: #708090;
  --urban-rust-grunge-4: #2F4F4F;
  --urban-rust-grunge-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rust-grunge": {
        1: "#A52A2A",
        2: "#696969",
        3: "#708090",
        4: "#2F4F4F",
        5: "#D3D3D3",
      }
    }
  }
}

Related searches

grunge color schemedark industrial paletteweathered city colorsalternative design aestheticurban decay palette

Palette colors

Hex values

Color 1#A52A2A
·
Color 2#696969
·
Color 3#708090
·
Color 4#2F4F4F
·
Color 5#D3D3D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
1.3:1Fail
4.7:1AA
2
1.3:1Fail
1.4:1Fail
1.6:1Fail
3.7:1AA18
3
1.7:1Fail
1.4:1Fail
2.2:1Fail
2.7:1Fail
4
1.3:1Fail
1.6:1Fail
2.2:1Fail
6:1AA
5
4.7:1AA
3.7:1AA18
2.7:1Fail
6:1AA

Similar palettes

More like Urban Rust Grunge

View all Neutral