Palette

Urban Rust Echoes

Gritty and organic, this palette evokes the weathered beauty of rusted metals and aged structures in an urban setting.

earthnatural5 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

#8B4513#A0522D#CD853F#D2B48C#B22222

Palette guide

How to use Urban Rust Echoes

Overview

The Urban Rust Echoes palette is a gritty and organic collection that evokes the weathered beauty of rusted metals and aged structures in an urban setting. Featuring a spectrum of rich browns and oranges, from the deep #8B4513 and #A0522D to the vibrant #CD853F, it's perfectly balanced by a soft, muted tan #D2B48C. A bold #B22222 adds a powerful, almost distressed accent. This palette is a designer's dream for projects that demand a natural, robust, and authentic feel, ideal for conveying a sense of heritage, ruggedness, or artisanal quality.

Best used for

Outdoor adventure and nature branding
Rustic and distressed website designs
Historical fiction book covers
Artisanal food and beverage packaging
Rugged apparel or gear promotions
Natural history museum exhibits

Suggested color roles

primary

Utilize #8B4513 as a strong, grounding primary color for main sections, headers, or backgrounds.

secondary

Employ #A0522D for secondary elements, calls to action, or to add a deeper layer of warm rust.

accent

Introduce #CD853F or the bold #B22222 for energetic highlights, interactive elements, or focal points.

background

The soft #D2B48C provides an excellent light, warm background, allowing the richer tones to stand out.

text

For lighter backgrounds like #D2B48C, use dark text such as #8B4513 or a deep charcoal. White text pairs well with #B22222.

Accessibility notes

Ensure sufficient contrast for text, especially when using any of the darker browns/oranges on #D2B48C.
The vibrant #CD853F and #B22222 will require light-colored text (e.g., white or #D2B48C) to meet contrast standards.
Avoid placing similar brown-orange tones directly next to each other for text or small elements without clear separation.
Consider providing alternative text styles (e.g., bolding or larger font sizes) for important information set in #CD853F.

Recommended combinations

Rustic Core

Creates a warm, inviting base with a light highlight and a rich mid-tone, perfect for natural aesthetics.

#8B4513 · #D2B48C · #A0522D

Bold Contrast

Features a powerful red accent against a soft tan, with a lighter orange for dynamic highlights.

#B22222 · #D2B48C · #CD853F

Aged Textures

Showcases the progression of rust and aged wood tones, creating a deeply organic and weathered feel.

#A0522D · #CD853F · #8B4513

CSS variables

:root {
  --urban-rust-echoes-1: #8B4513;
  --urban-rust-echoes-2: #A0522D;
  --urban-rust-echoes-3: #CD853F;
  --urban-rust-echoes-4: #D2B48C;
  --urban-rust-echoes-5: #B22222;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rust-echoes": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#CD853F",
        4: "#D2B48C",
        5: "#B22222",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#A0522D

Color 3#CD853F

Color 4#D2B48C

Color 5#B22222

Accessibility

Contrast checker

1.3:1Fail

2.4:1Fail

3.6:1AA18

1.1:1Fail

1.3:1Fail

1.9:1Fail

2.8:1Fail

1.2:1Fail

2.4:1Fail

1.9:1Fail

1.5:1Fail

2.2:1Fail

3.6:1AA18

2.8:1Fail

1.5:1Fail

3.4:1AA18

1.1:1Fail

1.2:1Fail

2.2:1Fail

3.4:1AA18

Similar palettes

More like Urban Rust Echoes

Bohemian Tapestry Weave