Back to palettes

Palette

Steampunk Goggles

Capturing the aged metallic and rich leather aesthetic of a steampunk invention, intricate and unique.

darkretro5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A87B42#3A2F2C#B3673F#5A5A5A#5E7980

Palette guide

How to use Steampunk Goggles

Overview

The "Steampunk Goggles" palette captures the essence of aged metallic components and rich leather, perfect for designs that demand an intricate, unique, and retro feel. With warm hues like #A87B42 (Brass) and #B3673F (Burnt Orange), it evokes polished brass and worn copper. The deep #3A2F2C (Dark Brown) grounds the palette, while #5A5A5A (Medium Gray) and #5E7980 (Dull Teal) introduce a cool, weathered metallic touch, suggesting tarnished steel or oxidized surfaces. This palette is excellent for projects aiming for a sophisticated, historical, yet inventive aesthetic.

Best used for

  • Steampunk character and prop design
  • Vintage product showcases and advertisements
  • Adventure game environments and assets
  • Retro-futuristic website themes
  • Branding for artisan leather goods
  • Themed event invitations

Suggested color roles

primary

Use #3A2F2C as a sturdy, dark brown base for structural elements and grounding large areas.

secondary

Apply #A87B42 (Brass) for prominent metallic parts, conveying age and polished detail.

accent

Introduce #B3673F (Burnt Orange) for subtle highlights, rust effects, or small focal points to add warmth.

background

A neutral #5A5A5A (Medium Gray) works well for textured backdrops, allowing other colors to stand out.

text

For dark backgrounds, use a light cream or white. On lighter elements, #3A2F2C provides excellent readability for body text.

Accessibility notes

  • Ensure sufficient contrast when pairing #A87B42 with #3A2F2C for text, especially for smaller fonts.
  • The #B3673F accent color should be used sparingly for text due to its vibrancy; best for large headings.
  • Check contrast between #5E7980 and adjacent mid-tone greys like #5A5A5A for readability.
  • For optimal readability, use a dark color like #3A2F2C for text on light backgrounds, and white on darker tones.

Recommended combinations

Leather & Brass

Captures the core materials of steampunk, ideal for primary design elements.

#3A2F2C · #A87B42 · #B3673F

Worn Metal Patina

Creates a look of aged, slightly tarnished metal with a hint of brassy sheen.

#5A5A5A · #5E7980 · #A87B42

Deep Industrial Base

Provides a muted, robust foundation, excellent for backgrounds and secondary elements.

#3A2F2C · #5A5A5A · #5E7980

CSS variables

:root {
  --steampunk-goggles-1: #A87B42;
  --steampunk-goggles-2: #3A2F2C;
  --steampunk-goggles-3: #B3673F;
  --steampunk-goggles-4: #5A5A5A;
  --steampunk-goggles-5: #5E7980;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steampunk-goggles": {
        1: "#A87B42",
        2: "#3A2F2C",
        3: "#B3673F",
        4: "#5A5A5A",
        5: "#5E7980",
      }
    }
  }
}

Related searches

steampunk leather paletteantique brass colorsretro industrial designvictorian invention colorsvintage brown grey

Palette colors

Hex values

Color 1#A87B42
·
Color 2#3A2F2C
·
Color 3#B3673F
·
Color 4#5A5A5A
·
Color 5#5E7980
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.4:1AA18
1.1:1Fail
1.8:1Fail
1.2:1Fail
2
3.4:1AA18
3:1AA18
1.9:1Fail
2.8:1Fail
3
1.1:1Fail
3:1AA18
1.6:1Fail
1.1:1Fail
4
1.8:1Fail
1.9:1Fail
1.6:1Fail
1.5:1Fail
5
1.2:1Fail
2.8:1Fail
1.1:1Fail
1.5:1Fail

Similar palettes

More like Steampunk Goggles

View all dark
Brass Cogs & Smoke
Clockwork Brass Patina
Film Noir Echo
Industrial Steampunk Grit
Rusty Foundry Steel
Speakeasy Lounge Vibe