Back to palettes

Palette

Urban Rust Patina

A rugged collection of earthy reds and oranges, capturing the aged beauty of rust and weathering on urban metals.

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

#4C261F#7A3D2F#A35F4F#CC887A#F0B0A0

Palette guide

How to use Urban Rust Patina

Overview

The Urban Rust Patina palette, featuring rich hues like #4C261F, #7A3D2F, and #A35F4F, evokes the rugged elegance of aged industrial materials. This collection of earthy reds and oranges, from deep rust to soft terracotta #F0B0A0, is perfect for projects aiming for a vintage or weathered aesthetic. Designers can leverage its warm, inviting tones to create depth and character, while developers will appreciate the cohesive spectrum for consistent branding across digital and physical mediums. The lighter shades like #CC887A can serve as gentle accents against the darker base, providing a sense of nostalgic warmth and authentic urban decay.

Best used for

  • Industrial branding
  • Vintage website design
  • Rustic interior decor concepts
  • Game environment textures
  • Autumn fashion collections
  • Editorial design with a historical feel

Suggested color roles

primary

#4C261F - Use as a grounding, deep base color for backgrounds or main structural elements, conveying stability and depth.

secondary

#7A3D2F - Excellent for headings, prominent UI components, or secondary calls-to-action, offering a strong, warm presence.

accent

#A35F4F - Introduce this mid-tone for interactive elements, highlights, or to draw attention to specific content without being overly bright.

background

#F0B0A0 - A very light, warm background for content areas, providing a soft canvas that allows darker text to stand out.

text

#4C261F - Ideal for body text on light backgrounds like #F0B0A0, ensuring readability with a rich, earthy feel. Consider black or charcoal for maximum contrast.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter shades like #CC887A for text.
  • Use #4C261F or #7A3D2F for text on #F0B0A0 for optimal readability.
  • Avoid placing #A35F4F text directly on #CC887A backgrounds due to low contrast.
  • Test color combinations with accessibility tools to meet WCAG AA or AAA standards.

Recommended combinations

Deep Rust

For robust headers, primary buttons, or impactful graphic elements, offering a strong, aged feel.

#4C261F · #7A3D2F · #A35F4F

Warm Patina

Ideal for softer UI components, subheadings, or as a gradient for a subtle, weathered transition.

#7A3D2F · #CC887A · #F0B0A0

Terracotta Glow

Use for inviting calls-to-action, decorative elements, or as a warm background with deep, contrasting text.

#A35F4F · #F0B0A0 · #4C261F

CSS variables

:root {
  --urban-rust-patina-5-1: #4C261F;
  --urban-rust-patina-5-2: #7A3D2F;
  --urban-rust-patina-5-3: #A35F4F;
  --urban-rust-patina-5-4: #CC887A;
  --urban-rust-patina-5-5: #F0B0A0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rust-patina-5": {
        1: "#4C261F",
        2: "#7A3D2F",
        3: "#A35F4F",
        4: "#CC887A",
        5: "#F0B0A0",
      }
    }
  }
}

Related searches

industrial color schemesrust effect colorsaged metal paletteearthy red orangevintage urban design

Palette colors

Hex values

Color 1#4C261F
·
Color 2#7A3D2F
·
Color 3#A35F4F
·
Color 4#CC887A
·
Color 5#F0B0A0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.6:1AA
7.1:1AAA
2
1.6:1Fail
1.7:1Fail
2.9:1Fail
4.5:1AA
3
2.7:1Fail
1.7:1Fail
1.7:1Fail
2.7:1Fail
4
4.6:1AA
2.9:1Fail
1.7:1Fail
1.5:1Fail
5
7.1:1AAA
4.5:1AA
2.7:1Fail
1.5:1Fail

Similar palettes

More like Urban Rust Patina

View all earth