Back to palettes

Palette

Rusty Metal

Deep, weathered hues of coppery-browns and oranges, like oxidized metals telling a story of time.

warmretro5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rusty Metal 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 Rusty Metal.

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

Data visualization

#B87333#A0522D#CD5C5C#8B4513#D2691E

Palette guide

How to use Rusty Metal

Overview

This "Rusty Metal" color palette evokes the deep, weathered beauty of oxidized iron and copper. Featuring rich coppery-browns like #B87333 and #D2691E, alongside deeper rust tones such as #A0522D and #8B4513, and a striking reddish-brown #CD5C5C, it's perfect for projects seeking an authentic, aged aesthetic. Designers can leverage these hues to create warmth and character, while developers will find them ideal for crafting user interfaces that convey a sense of history, industrial chic, or vintage charm. This collection offers a strong foundation for branding, digital art, or web design where a rustic, enduring feel is desired.

Best used for

  • Industrial-themed branding and websites
  • Vintage or retro graphic design projects
  • Game environments depicting aged machinery or ruins
  • Rustic interior design mood boards
  • Packaging for artisanal goods or craft beverages
  • Thematic digital illustrations and concept art

Suggested color roles

primary

Use the rich coppery-brown #B87333 for main headers or key interactive elements to establish a warm, earthy foundation.

secondary

Apply the deeper #A0522D for supporting sections or subheadings, adding depth without overpowering the primary.

accent

The striking reddish-brown #CD5C5C works well for call-to-action buttons or highlights, drawing immediate attention.

background

A muted, desaturated background like a very light cream or a soft charcoal can provide contrast.

text

For body text, consider a deep brown like #8B4513 or a dark charcoal for readability against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially with warmer tones like #B87333.
  • Avoid using #CD5C5C directly on #A0522D for text to prevent low contrast issues.
  • Darker browns like #8B4513 offer better readability for body text against light or off-white backgrounds.
  • Test all color pairings with WCAG guidelines for AA or AAA compliance, particularly for interactive elements.

Recommended combinations

Aged Patina

Ideal for creating a layered, weathered effect in UI elements or illustrations.

#B87333 · #A0522D · #CD5C5C

Deep Rust

Excellent for robust branding, providing a strong and grounded visual identity.

#8B4513 · #D2691E · #B87333

Industrial Warmth

Use for vibrant accents against a more neutral backdrop, conveying energy and warmth.

#CD5C5C · #B87333 · #D2691E

CSS variables

:root {
  --rusty-metal-1: #B87333;
  --rusty-metal-2: #A0522D;
  --rusty-metal-3: #CD5C5C;
  --rusty-metal-4: #8B4513;
  --rusty-metal-5: #D2691E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rusty-metal": {
        1: "#B87333",
        2: "#A0522D",
        3: "#CD5C5C",
        4: "#8B4513",
        5: "#D2691E",
      }
    }
  }
}

Related searches

aged metal color schemeindustrial rust paletteweathered copper colorsvintage brown orange paletteearthy industrial design

Palette colors

Hex values

Color 1#B87333
·
Color 2#A0522D
·
Color 3#CD5C5C
·
Color 4#8B4513
·
Color 5#D2691E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1:1Fail
1.9:1Fail
1:1Fail
2
1.5:1Fail
1.4:1Fail
1.3:1Fail
1.5:1Fail
3
1:1Fail
1.4:1Fail
1.8:1Fail
1.1:1Fail
4
1.9:1Fail
1.3:1Fail
1.8:1Fail
2:1Fail
5
1:1Fail
1.5:1Fail
1.1:1Fail
2:1Fail

Similar palettes

More like Rusty Metal

View all warm