Rust Belt Color Psychology & Meaning
Rust Belt is the color of oxidized metal, weathered brick, and industrial heritage. It says: we have earned our credibility through decades of real work.
#8B4513
#CD853F
#DEB887
#F5DEB3
Background
Primary Accent
Secondary
Body Text
Rust Belt
warmearthyvintage autumnwinter brandinginterior
AA
WCAG Grade
5.4:1
Contrast Ratio
1,543
Saves
3,892
AI Copies
Use #8B4513 as the background. Use #CD853F as the primary accent. Use #DEB887 as secondary. Use #F5DEB3 as body text/supporting color. Palette mood: Rust Belt — warm, earthy, vintage.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Rust Belt color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 9.8% | 139, 69, 19 | 0%, 50%, 86%, 45% | 25°, 76%, 31% | ||
| Primary Accent Luminance: 30.1% | 205, 133, 63 | 0%, 35%, 69%, 20% | 30°, 59%, 53% | ||
| Secondary Luminance: 51.6% | 222, 184, 135 | 0%, 17%, 39%, 13% | 34°, 57%, 70% | ||
| Body Text Luminance: 74.9% | 245, 222, 179 | 0%, 9%, 27%, 4% | 39°, 77%, 83% |
Color Harmony: Analogous Scheme
The Rust Belt palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
History & Design Context
American industrial cities of the Midwest inspired this palette. The patina of aged steel and copper has been romanticized in photography and fashion.
Best Design Use Cases
Rich rust as the primary accent. Lighter amber for secondary surfaces. Warm wheat for backgrounds. Creates an authentic, weathered aesthetic.
Industries This Palette Suits
Craft brands, industrial design, heritage products, architecture.
How to Implement the Rust Belt Color Scheme
To use this Rust Belt color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #8B4513 for the main background and #CD853F for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #F5DEB3 and #8B4513 is 5.40:1 (AA). Ensure your body text remains legible.