Palette

Industrial Rust Patina

Warm, weathered tones of oxidized metals and aged industrial structures.

warmretro5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Industrial 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 Industrial Rust Patina.

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

Data visualization

#7C4B00#A86D00#D38C00#F8B739#FFD687

Palette guide

How to use Industrial Rust Patina

Overview

The Industrial Rust Patina palette radiates with warm, oxidized tones, capturing the vibrant essence of aged metals and vintage industrial machinery. Ranging from the deep, burnished #7C4B00 to the bright, luminous #FFD687, this palette offers a rich spectrum of oranges and golds. It's exceptionally dynamic for designs that aim for a retro, antique, or energetic industrial feel. Designers can use its striking warmth to create focal points and inject personality, while developers will find it versatile for crafting engaging user interfaces that stand out with a vintage yet robust character, perfect for applications needing a touch of old-world charm.

Best used for

Vintage or retro-themed branding
Steampunk-inspired digital art
Craft beer or artisanal food packaging
Event promotion for music festivals or fairs
Web design with a warm, inviting aesthetic
Product design for antique reproductions

Suggested color roles

primary

#7C4B00. This deep, warm orange-brown serves as a rich, grounding base for backgrounds or large sections, evoking aged brass or deep rust.

secondary

#A86D00. A slightly brighter, yet still deep, orange-gold, perfect for secondary panels, cards, or navigation bars, offering subtle layering.

accent

#F8B739. This bright, almost golden orange is ideal for calls to action, interactive elements, or key highlights, ensuring high visibility and energy.

background

#7C4B00. An excellent choice for the main canvas, creating a warm, inviting, and vintage-inspired environment that makes lighter elements glow.

text

#FFD687. This lightest, bright golden yellow provides good readability for primary text on #7C4B00 or #A86D00. For headings, consider pure black or dark charcoal.

Accessibility notes

#FFD687 on #7C4B00 or #A86D00 may require careful checking for WCAG AA contrast, especially for small text. Darker text is often needed for maximum legibility.
Ensure interactive elements using #F8B739 have clear hover and focus states against similar warm backgrounds.
Avoid using #D38C00 or darker for text on #7C4B00, as contrast will be insufficient.
For critical text, consider using a very dark brown, charcoal, or black to achieve optimal contrast against the bright, warm background colors.

Recommended combinations

Deep Gold Base

Forms a rich, warm UI: #7C4B00 for background, #A86D00 for panels, #FFD687 for primary text.

#7C4B00 · #A86D00 · #FFD687

Vibrant Accents

Creates dynamic visual interest: #A86D00 as base, #D38C00 for details, #F8B739 for strong highlights.

#A86D00 · #D38C00 · #F8B739

Bright Contrast

Use #7C4B00 as a deep canvas, #F8B739 for prominent interactive elements, and #FFD687 for clear headings.

#7C4B00 · #F8B739 · #FFD687

CSS variables

:root {
  --industrial-rust-patina-1: #7C4B00;
  --industrial-rust-patina-2: #A86D00;
  --industrial-rust-patina-3: #D38C00;
  --industrial-rust-patina-4: #F8B739;
  --industrial-rust-patina-5: #FFD687;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-rust-patina": {
        1: "#7C4B00",
        2: "#A86D00",
        3: "#D38C00",
        4: "#F8B739",
        5: "#FFD687",
      }
    }
  }
}

Hex values

Color 1#7C4B00

Color 2#A86D00

Color 3#D38C00

Color 4#F8B739

Color 5#FFD687

Accessibility

Contrast checker

1.7:1Fail

2.6:1Fail

4.1:1AA18

5.3:1AA

1.7:1Fail

1.5:1Fail

2.4:1Fail

3.1:1AA18

2.6:1Fail

1.5:1Fail

1.6:1Fail

2:1Fail

4.1:1AA18

2.4:1Fail

1.6:1Fail

1.3:1Fail

5.3:1AA

3.1:1AA18

2:1Fail

1.3:1Fail

Similar palettes

More like Industrial Rust Patina