Back to palettes

Palette

Urban Rust Patina

Earthy browns and faded oranges mimicking the beautiful, weathered rust on urban metal.

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

#5a2a1a#8c4a2d#ad6e4b#d39a7b#f0c7a3

Palette guide

How to use Urban Rust Patina

Overview

The Urban Rust Patina palette offers a beautiful gradient of earthy browns and faded oranges, perfectly mimicking the weathered rust on urban metal. From the deep, grounding #5a2a1a to the soft, airy #f0c7a3, this palette provides a rich, organic flow. Intermediate tones like #8c4a2d, #ad6e4b, and #d39a7b add depth and natural variation, making it incredibly versatile for designers and developers. It's ideal for creating designs that feel warm, established, and subtly aged, perfect for projects requiring a vintage, natural, or sophisticated industrial aesthetic.

Best used for

  • Vintage branding and packaging
  • Natural product lines and cosmetics
  • Cozy interior design mood boards
  • Historical fiction website themes
  • Artisanal craft marketing materials
  • Retro-inspired digital art

Suggested color roles

primary

Utilize #5a2a1a as a deep, anchoring color for backgrounds, strong headers, or impactful design elements.

secondary

Employ #8c4a2d for secondary sections, calls to action, or to add a vibrant, warm layer of rust.

accent

Introduce #d39a7b or #f0c7a3 for soft highlights, interactive elements, or to brighten key information.

background

The lightest #f0c7a3 serves as an excellent warm, neutral background, allowing darker tones to pop.

text

For lighter backgrounds like #f0c7a3, use dark text such as #5a2a1a or a deep charcoal. White text pairs well with #5a2a1a.

Accessibility notes

  • Ensure high contrast for text on backgrounds; #f0c7a3 requires dark text (e.g., #5a2a1a) for optimal readability.
  • When using #5a2a1a or #8c4a2d as backgrounds, ensure text is light (e.g., white or #f0c7a3) to meet contrast standards.
  • Avoid using adjacent tones like #ad6e4b and #d39a7b for text and background without careful contrast checks.
  • For interactive elements, ensure a clear visual distinction, perhaps by using #f0c7a3 for hover states on darker colors.

Recommended combinations

Deep Patina

Creates a rich, aged feel with a deep base, a soft highlight, and a vibrant mid-tone rust accent.

#5A2A1A · #D39A7B · #8C4A2D

Faded Warmth

Highlights the lighter, faded orange with a warm mid-tone, anchored by the deepest brown for contrast.

#F0C7A3 · #AD6E4B · #5A2A1A

Rust Gradient

Showcases the smooth transition of rust tones, ideal for subtle gradients or layered elements.

#8C4A2D · #AD6E4B · #D39A7B

CSS variables

:root {
  --urban-rust-patina-2-1: #5a2a1a;
  --urban-rust-patina-2-2: #8c4a2d;
  --urban-rust-patina-2-3: #ad6e4b;
  --urban-rust-patina-2-4: #d39a7b;
  --urban-rust-patina-2-5: #f0c7a3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rust-patina-2": {
        1: "#5a2a1a",
        2: "#8c4a2d",
        3: "#ad6e4b",
        4: "#d39a7b",
        5: "#f0c7a3",
      }
    }
  }
}

Related searches

earthy rust palettevintage patina colorswarm brown orangeindustrial retro designfaded metal aesthetic

Palette colors

Hex values

Color 1#5a2a1a
·
Color 2#8c4a2d
·
Color 3#ad6e4b
·
Color 4#d39a7b
·
Color 5#f0c7a3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.9:1Fail
4.9:1AA
7.5:1AAA
2
1.8:1Fail
1.6:1Fail
2.8:1Fail
4.3:1AA18
3
2.9:1Fail
1.6:1Fail
1.7:1Fail
2.6:1Fail
4
4.9:1AA
2.8:1Fail
1.7:1Fail
1.5:1Fail
5
7.5:1AAA
4.3:1AA18
2.6:1Fail
1.5:1Fail

Similar palettes

More like Urban Rust Patina

View all earth