Back to palettes

Palette

Steampunk Rivet Patina

Weathered browns and aged greys evoke the worn metallic beauty and industrial charm of steampunk aesthetics.

earthretro5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Steampunk Rivet 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 Steampunk Rivet Patina.

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

Data visualization

#8B4513#A0522D#696969#4F4F4F#D2B48C

Palette guide

How to use Steampunk Rivet Patina

Overview

The "Steampunk Rivet Patina" palette embodies the weathered browns and aged greys of a steampunk world. Deep, earthy tones like #8B4513 (Saddle Brown) and #A0522D (Sienna) evoke rich, worn leather and rusted metals. The industrial strength comes from #4F4F4F (Dark Grey) and #696969 (Dim Gray), simulating robust iron and steel. A luminous #D2B48C (Tan) provides a perfect accent, suggesting aged brass or a subtle, oxidized patina. This palette is excellent for designs that require a vintage, mechanical, and slightly rustic charm, emphasizing durability and historical character.

Best used for

  • Vintage website design and blogs
  • Rustic product packaging and labels
  • Historical game environments and assets
  • Artisan craft branding and logos
  • Industrial-themed cafe interiors
  • Photography portfolios with an antique feel

Suggested color roles

primary

Use #4F4F4F as a strong, dark grey base for structural elements, borders, or large text blocks.

secondary

Apply #8B4513 for warm, rich accents like worn wood, leather, or rusted details.

accent

Highlight with #D2B48C (Tan) to simulate aged brass, polished rivets, or subtle patina effects.

background

A mid-tone #696969 (Dim Gray) creates a versatile, industrial backdrop that supports both warm and cool elements.

text

For optimal readability on light backgrounds, use #4F4F4F. For dark backgrounds, #D2B48C provides excellent contrast.

Accessibility notes

  • Ensure #D2B48C has sufficient contrast when used for text on #696969 or #4F4F4F backgrounds.
  • Avoid using #8B4513 or #A0522D for small body text, as their warmth can reduce readability on certain backgrounds.
  • Use #4F4F4F for primary body text on lighter background elements like #D2B48C.
  • Check contrast carefully when pairing #696969 with #4F4F4F for text or interactive elements.

Recommended combinations

Weathered Metal Base

Creates a robust, aged metallic foundation with a touch of bright patina.

#4F4F4F · #696969 · #D2B48C

Rusted Iron & Leather

Evokes deep, earthy rust and worn leather tones against a dark industrial grey.

#8B4513 · #A0522D · #4F4F4F

Patina Highlight

Uses the light tan as a prominent accent against darker, textured grey and brown.

#D2B48C · #696969 · #8B4513

CSS variables

:root {
  --steampunk-rivet-patina-1: #8B4513;
  --steampunk-rivet-patina-2: #A0522D;
  --steampunk-rivet-patina-3: #696969;
  --steampunk-rivet-patina-4: #4F4F4F;
  --steampunk-rivet-patina-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steampunk-rivet-patina": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#696969",
        4: "#4F4F4F",
        5: "#D2B48C",
      }
    }
  }
}

Related searches

steampunk brown greyaged industrial colorsrivet metal palettevintage patina hexrustic steampunk design

Palette colors

Hex values

Color 1#8B4513
·
Color 2#A0522D
·
Color 3#696969
·
Color 4#4F4F4F
·
Color 5#D2B48C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.3:1Fail
1.2:1Fail
3.6:1AA18
2
1.3:1Fail
1:1Fail
1.5:1Fail
2.8:1Fail
3
1.3:1Fail
1:1Fail
1.5:1Fail
2.8:1Fail
4
1.2:1Fail
1.5:1Fail
1.5:1Fail
4.2:1AA18
5
3.6:1AA18
2.8:1Fail
2.8:1Fail
4.2:1AA18

Similar palettes

More like Steampunk Rivet Patina

View all earth
Steampunk Gears Bronze
Urban Rust Patina
Rusty Metal Patina
Aged Copper Patina
Aged Copper Patina
Aged Leather Charm