Palette

Industrial Gear Rust

Weathered browns and deep oranges, portraying the aged beauty of rusty industrial gears and abandoned machinery.

earthretro5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#A0522D#B8860B#CD853F#6B4226

Palette guide

How to use Industrial Gear Rust

Overview

The Industrial Gear Rust palette captures the aged beauty of rusty industrial gears and abandoned machinery with its weathered browns and deep oranges. Featuring shades from the rich #8B4513 to the vibrant #CD853F, and including earthy tones like #6B4226, this collection offers designers and developers a unique, textural aesthetic. It's perfect for conveying authenticity, heritage, and a rugged, vintage appeal in digital and physical designs. The warm, robust tones ensure excellent visual harmony, making it suitable for retro-inspired interfaces, artisanal branding, or any project aiming for a handcrafted, enduring character.

Best used for

Retro or vintage-themed websites
Craft brewery branding and packaging
Steampunk-inspired designs
Automotive restoration showcases
Earthy, textured UI elements
Photography portfolios with warm tones

Suggested color roles

primary

#8B4513 - A deep, rich rust brown, ideal for foundational elements, headers, and backgrounds to establish a strong, warm base.

secondary

#A0522D - A slightly lighter, vibrant rust tone that works well for secondary content blocks, card backgrounds, or prominent call-to-actions.

accent

#CD853F - A brighter, warm orange, designed to be a striking focal point for interactive elements, alerts, or key visual highlights.

background

#6B4226 - A deep, muted brown, providing a rich, earthy background that allows lighter elements and the accent color to pop.

text

#CD853F - For accent text or headlines on very dark backgrounds like #6B4226. For body text, use a light cream or off-white on #8B4513 or #A0522D.

Accessibility notes

Ensure sufficient contrast between light text (e.g., white) and dark backgrounds like #8B4513 or #6B4226.
Avoid using #CD853F for small text on #A0522D due to potential low contrast.
The bright #CD853F accent should be used sparingly and with consideration for contrast against its background.
Verify contrast for all text elements, especially when using lighter shades on other light shades within the palette.

Recommended combinations

Rustic Contrast

Creates a vibrant, earthy contrast, perfect for branding, main content areas, and drawing attention to key features.

#8B4513 · #A0522D · #CD853F

Aged Metals

Ideal for backgrounds or layered elements, offering a smooth, deep transition that evokes aged metal textures.

#6B4226 · #8B4513 · #A0522D

Ember Glow

Effective for establishing visual hierarchy within components, using varied warm tones for different states or information levels.

#A0522D · #B8860B · #CD853F

CSS variables

:root {
  --industrial-gear-rust-1: #8B4513;
  --industrial-gear-rust-2: #A0522D;
  --industrial-gear-rust-3: #B8860B;
  --industrial-gear-rust-4: #CD853F;
  --industrial-gear-rust-5: #6B4226;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-gear-rust": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#B8860B",
        4: "#CD853F",
        5: "#6B4226",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#A0522D

Color 3#B8860B

Color 4#CD853F

Color 5#6B4226

Accessibility

Contrast checker

1.3:1Fail

2.2:1Fail

2.4:1Fail

1.2:1Fail

1.3:1Fail

1.7:1Fail

1.9:1Fail

1.5:1Fail

2.2:1Fail

1.7:1Fail

1.1:1Fail

2.7:1Fail