Back to palettes

Palette

Steampunk Gears Bronze

A robust collection of bronzes, coppers, and muted greys, inspired by antique machinery and industrial elegance.

earthretro5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Steampunk Gears Bronze 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 Gears Bronze.

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

Data visualization

#8B4513#A0522D#CD853F#D2B48C#696969

Palette guide

How to use Steampunk Gears Bronze

Overview

The Steampunk Gears Bronze palette (ID: steampunk-gears-bronze-2) offers a robust collection of bronzes, coppers, and muted greys, meticulously inspired by antique machinery and industrial elegance. Anchored by rich browns like #8B4513 (Saddle Brown) and #A0522D (Sienna), it establishes a warm, aged foundation. Lighter, polished tones such as #CD853F (Peru) and #D2B48C (Tan) introduce a radiant metallic sheen, while #696969 (Dim Gray) provides a crucial cool, industrial balance. This palette is exceptionally useful for designers and developers aiming for a vintage, mechanical, or sophisticated retro aesthetic. It seamlessly blends warmth with a grounded neutrality, perfect for projects demanding an authentic, intricate, and somewhat antique feel.

Best used for

  • UI for vintage-themed applications or websites
  • Historical documentary or educational content
  • Luxury steampunk product branding
  • Museum exhibit designs and signage
  • Classic car or antique restoration websites
  • Retro-futuristic game environments

Suggested color roles

primary

Utilize #8B4513 or #A0522D as the dominant colors for large sections, headers, or primary structural elements to establish a strong, aged metallic tone.

secondary

Employ #CD853F and #D2B48C for secondary content areas, subheadings, or decorative patterns that require a lighter, polished touch.

accent

Reserve #CD853F for subtle highlights, interactive elements, or to simulate polished bronze details against darker backgrounds.

background

The mid-gray #696969 offers a neutral, industrial background, allowing the warm bronze and copper tones to stand out prominently.

text

For optimal readability, use a dark brown (e.g., #8B4513) or black on lighter backgrounds like #D2B48C. On darker backgrounds, #D2B48C or a crisp white provides good contrast.

Accessibility notes

  • Ensure sufficient contrast when pairing text with the varied metallic backgrounds; use contrast checkers diligently.
  • Avoid using #D2B48C for small text on #CD853F backgrounds due to similar luminosity.
  • Test all color combinations for text and interactive elements to meet WCAG guidelines.
  • Consider providing alternative text styles (e.g., bolding) for important information in mid-tone colors.

Recommended combinations

Antique Machinery

Excellent for creating deep, layered backgrounds with a polished antique bronze highlight, suitable for headers.

#8B4513 · #A0522D · #D2B48C

Industrial Gear

Perfect for contrasting cool gray with warm bronze details, ideal for UI elements or illustrations of gears.

#696969 · #CD853F · #8B4513

Polished Patina

Ideal for a softer, more blended metallic background with subtle gray accents, suitable for decorative graphics.

#A0522D · #D2B48C · #696969

CSS variables

:root {
  --steampunk-gears-bronze-2-1: #8B4513;
  --steampunk-gears-bronze-2-2: #A0522D;
  --steampunk-gears-bronze-2-3: #CD853F;
  --steampunk-gears-bronze-2-4: #D2B48C;
  --steampunk-gears-bronze-2-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steampunk-gears-bronze-2": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#CD853F",
        4: "#D2B48C",
        5: "#696969",
      }
    }
  }
}

Related searches

steampunk bronze paletteantique gears colorsindustrial elegance schemevintage machinery huesmetallic earth tones

Palette colors

Hex values

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

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.4:1Fail
3.6:1AA18
1.3:1Fail
2
1.3:1Fail
1.9:1Fail
2.8:1Fail
1:1Fail
3
2.4:1Fail
1.9:1Fail
1.5:1Fail
1.8:1Fail
4
3.6:1AA18
2.8:1Fail
1.5:1Fail
2.8:1Fail
5
1.3:1Fail
1:1Fail
1.8:1Fail
2.8:1Fail

Similar palettes

More like Steampunk Gears Bronze

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