Back to palettes

Palette

Urban Rust Patina

A robust palette of weathered browns and metallic grays, inspired by aged urban architecture.

earthretro5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A52A2A#B87333#CD853F#D2B48C#696969

Palette guide

How to use Urban Rust Patina

Overview

The Urban Rust Patina palette is a robust collection of weathered browns and metallic grays, inspired by aged urban architecture. It features the strong, earthy #A52A2A, reminiscent of old brick, alongside metallic bronze tones like #B87333 and #CD853F. A soft, muted tan #D2B48C provides a gentle contrast, while the solid #696969 grounds the palette with an industrial gray. This combination is excellent for designers and developers aiming to convey a sense of history, strength, and vintage appeal, making it perfect for heritage brands, rustic themes, or industrial-chic designs.

Best used for

  • Industrial heritage site branding
  • Vintage product packaging and labels
  • Rustic cafe or brewery interiors
  • Historical themed game environments
  • Architectural portfolio websites
  • Rugged outdoor gear advertising

Suggested color roles

primary

Utilize #A52A2A as a dominant, earthy red-brown for strong headers, backgrounds, or key visual elements.

secondary

Employ #B87333 or #CD853F for secondary actions, metallic accents, or to add a rich, warm layer.

accent

Introduce #D2B48C for soft highlights, subtle details, or to provide a gentle contrast.

background

The muted #696969 serves as a versatile mid-tone gray background, or use #D2B48C for a lighter, warmer canvas.

text

For dark backgrounds, use white or #D2B48C. For light backgrounds, #A52A2A or a deep charcoal offers excellent readability.

Accessibility notes

  • Ensure sufficient contrast for text when using any of the darker colors (#A52A2A, #B87333, #696969) as backgrounds.
  • The light #D2B48C requires dark text (e.g., #A52A2A or black) to meet accessibility standards.
  • Avoid low contrast between similar mid-tones like #B87333 and #CD853F if used for text and background.
  • For interactive elements, ensure a clear visual distinction, perhaps using #D2B48C for hover states on darker buttons.

Recommended combinations

Rustic Core

Creates a strong, earthy base with a light highlight and a grounding gray, perfect for robust branding.

#A52A2A · #D2B48C · #696969

Metallic Accents

Showcases the metallic bronze tones with a deep red-brown, ideal for industrial or vintage designs.

#B87333 · #CD853F · #A52A2A

Aged Urban

Blends a cool gray with a warm tan and bronze, evoking the feel of weathered city architecture.

#696969 · #D2B48C · #B87333

CSS variables

:root {
  --urban-rust-patina-3-1: #A52A2A;
  --urban-rust-patina-3-2: #B87333;
  --urban-rust-patina-3-3: #CD853F;
  --urban-rust-patina-3-4: #D2B48C;
  --urban-rust-patina-3-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rust-patina-3": {
        1: "#A52A2A",
        2: "#B87333",
        3: "#CD853F",
        4: "#D2B48C",
        5: "#696969",
      }
    }
  }
}

Related searches

rustic brown grayindustrial vintage paletteaged metal architectureweathered urban colorsretro rust tones

Palette colors

Hex values

Color 1#A52A2A
·
Color 2#B87333
·
Color 3#CD853F
·
Color 4#D2B48C
·
Color 5#696969
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
2.4:1Fail
3.6:1AA18
1.3:1Fail
2
1.9:1Fail
1.3:1Fail
1.9:1Fail
1.4:1Fail
3
2.4:1Fail
1.3:1Fail
1.5:1Fail
1.8:1Fail
4
3.6:1AA18
1.9:1Fail
1.5:1Fail
2.8:1Fail
5
1.3:1Fail
1.4:1Fail
1.8:1Fail
2.8:1Fail

Similar palettes

More like Urban Rust Patina

View all earth