Palette

Urban Rust Echo

Earthy reds and grays reflecting the aged patina of metal in an old city.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A050B#B43A1B#E26E3C#F4A261#C7C6BA

Palette guide

How to use Urban Rust Echo

Overview

The Urban Rust Echo palette is a dynamic collection of earthy reds and vibrant oranges, reflecting the aged patina of metal in an old city. Anchored by a deep, authoritative red #6A050B, it progresses through a bold #B43A1B and an energetic #E26E3C, culminating in a bright, optimistic #F4A261. A cool, neutral gray #C7C6BA provides balance, preventing the warmth from becoming overwhelming. This palette is a designer's go-to for projects requiring a sense of robust vitality, historical depth, and a touch of modern urban grit, making it highly versatile for various visual applications.

Best used for

Rustic and artisanal branding
Autumnal or harvest-themed designs
Robust web interfaces and dashboards
Warning or alert system accents
Industrial-chic interior concepts
Vintage signage and advertising

Suggested color roles

primary

Utilize #6A050B for strong, impactful statements, main headings, or backgrounds where a rich, deep red is desired.

secondary

Employ #B43A1B for secondary calls to action, prominent graphics, or to add a powerful, warm layer.

accent

Brighten interactive elements or focal points with #E26E3C or #F4A261 for energetic highlights.

background

The light, neutral #C7C6BA is ideal for clean, readable backgrounds, allowing the warmer tones to pop.

text

For dark backgrounds, use white or #C7C6BA. For light backgrounds, #6A050B or a deep charcoal provides excellent contrast.

Accessibility notes

Ensure sufficient contrast between #6A050B, #B43A1B, #E26E3C, #F4A261 and the light #C7C6BA for readability.
Avoid using similar red/orange tones for text and background in close proximity without adequate contrast.
For interactive elements, ensure a clear visual distinction, especially when using the brighter oranges.
When placing text on the vibrant #E26E3C or #F4A261, use a dark, contrasting color or a very large font size.

Recommended combinations

Vibrant Contrast

Highlights the energetic orange against a neutral base, anchored by a deep red for impact.

#F4A261 · #C7C6BA · #6A050B

Earthy Dynamics

Showcases the progression of rust tones, softened by a cool gray for balance and versatility.

#B43A1B · #E26E3C · #C7C6BA

Bold & Grounded

Combines strong reds with a balancing neutral, ideal for robust branding or impactful headlines.

#6A050B · #B43A1B · #C7C6BA

CSS variables

:root {
  --urban-rust-echo-3-1: #6A050B;
  --urban-rust-echo-3-2: #B43A1B;
  --urban-rust-echo-3-3: #E26E3C;
  --urban-rust-echo-3-4: #F4A261;
  --urban-rust-echo-3-5: #C7C6BA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rust-echo-3": {
        1: "#6A050B",
        2: "#B43A1B",
        3: "#E26E3C",
        4: "#F4A261",
        5: "#C7C6BA",
      }
    }
  }
}

Hex values

Color 1#6A050B

Color 2#B43A1B

Color 3#E26E3C

Color 4#F4A261

Color 5#C7C6BA

Accessibility

Contrast checker

2.2:1Fail

4:1AA18

6.2:1AA

7.5:1AAA

2.2:1Fail

1.8:1Fail

2.9:1Fail

3.4:1AA18

4:1AA18

1.8:1Fail

1.6:1Fail

1.9:1Fail

6.2:1AA

2.9:1Fail

1.6:1Fail

1.2:1Fail

7.5:1AAA

3.4:1AA18

1.9:1Fail

1.2:1Fail

Similar palettes

More like Urban Rust Echo