Palette

Urban Rust Echoes

Evokes the warm, muted tones of aged city structures and metal patinas.

earthretro5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#52373F#A0463D#F1BF98#D8A47F#6A6763

Palette guide

How to use Urban Rust Echoes

Overview

The Urban Rust Echoes palette evokes the warm, muted tones of aged city structures and metal patinas, offering a retro yet timeless feel. Starting with the deep, mysterious #52373F, it introduces a rich, earthy #A0463D and a warm, inviting #D8A47F, complemented by the softest highlight #F1BF98. A versatile #6A6763 provides a grounding neutral, perfect for balancing the warmer hues. This palette is ideal for designers and developers creating projects that require a sense of history, comfort, and a subtly distressed charm, from vintage branding to cozy digital experiences.

Best used for

Retro and vintage branding projects
Historical documentary visual design
Cozy cafe or boutique interior concepts
Photography presets for an aged look
Product packaging with a nostalgic feel
Websites for artisanal crafts or heritage goods

Suggested color roles

primary

Use #52373F as a deep, anchoring color for backgrounds, headers, or impactful design elements.

secondary

Apply #A0463D for secondary sections, calls to action, or to add a warm, earthy layer of color.

accent

Introduce #F1BF98 or #D8A47F for soft highlights, interactive elements, or to brighten key information.

background

The muted #6A6763 serves as an excellent warm-gray background, or use #F1BF98 for a lighter canvas.

text

For dark backgrounds, use light text like white or #F1BF98. For lighter backgrounds, #52373F or a dark charcoal offers great readability.

Accessibility notes

Ensure good contrast for text on backgrounds; #F1BF98 requires dark text (e.g., #52373F).
When using #52373F or #A0463D as backgrounds, ensure text is light (e.g., white or #F1BF98) for optimal readability.
Avoid low contrast between similar mid-tones like #D8A47F and #6A6763 when used as text and background.
Consider larger font sizes for text set in #A0463D if it's placed on a background of similar intensity.

Recommended combinations

Warm Patina

Creates a sophisticated, aged feel with a deep base, a warm highlight, and a balancing neutral.

#52373F · #D8A47F · #6A6763

Rustic Glow

Highlights the earthy rust tones with a soft, glowing accent, anchored by a deep plum-brown.

#A0463D · #F1BF98 · #52373F

Muted Comfort

Blends a warm gray with gentle peach and rust, ideal for inviting and cozy digital spaces.

#6A6763 · #D8A47F · #A0463D

CSS variables

:root {
  --urban-rust-echoes-2-1: #52373F;
  --urban-rust-echoes-2-2: #A0463D;
  --urban-rust-echoes-2-3: #F1BF98;
  --urban-rust-echoes-2-4: #D8A47F;
  --urban-rust-echoes-2-5: #6A6763;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rust-echoes-2": {
        1: "#52373F",
        2: "#A0463D",
        3: "#F1BF98",
        4: "#D8A47F",
        5: "#6A6763",
      }
    }
  }
}

Hex values

Color 1#52373F

Color 2#A0463D

Color 3#F1BF98

Color 4#D8A47F

Color 5#6A6763

Accessibility

Contrast checker

1.7:1Fail

6.4:1AA

4.8:1AA

1.9:1Fail

1.7:1Fail

3.7:1AA18

2.8:1Fail

1.1:1Fail

6.4:1AA

3.7:1AA18

1.3:1Fail

3.4:1AA18

4.8:1AA

2.8:1Fail

1.3:1Fail

2.6:1Fail

1.9:1Fail

1.1:1Fail

3.4:1AA18

2.6:1Fail

Similar palettes

More like Urban Rust Echoes

View all earth

Rusting Industrial Steel

Industrial Gear Rust

Rusty Gears Steam

Rusty Metal Patina

Steampunk Gears Bronze

Steampunk Rivet Patina