Palette

Steampunk Gears Bronze

Warm, antique bronzes and coppers, reflecting the intricate machinery and Victorian aesthetic of steampunk design.

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

#4A3A2F#7B685B#B8A89A#E0D3C7#6A5B4F

Palette guide

How to use Steampunk Gears Bronze

Overview

The Steampunk Gears Bronze palette (ID: steampunk-gears-bronze) offers a warm, antique collection of bronzes and coppers, reflecting the intricate machinery and Victorian aesthetic of steampunk design. It features a gradient of rich, earthy tones from the deep #4A3A2F (Dark Bronze) to the lighter #E0D3C7 (Pale Bronze), with intermediate shades like #7B685B (Medium Bronze) and #B8A89A (Light Bronze). The consistent #6A5B4F (Rusty Bronze) ties the palette together with a weathered touch. This collection is invaluable for designers and developers aiming for an elegant retro, vintage, or mechanical aesthetic. It provides a harmonious blend of warmth and sophistication, perfect for projects demanding an authentic, intricate, and somewhat antique feel, evoking polished metals and aged craftsmanship.

Best used for

Elegant retro branding and identity
Period film sets and costume design
Bespoke artisan websites and portfolios
Luxury watch or jewelry designs
Historical game interfaces and assets
Victorian-era themed event invitations

Suggested color roles

primary

Utilize #4A3A2F as the dominant background or base color to establish a deep, rich antique bronze foundation.

secondary

Employ #7B685B and #6A5B4F for secondary content areas, borders, or to simulate aged metal textures.

accent

Reserve #B8A89A and #E0D3C7 for subtle highlights, interactive elements, or intricate details, mimicking polished bronze.

background

Mid-tones like #7B685B or #6A5B4F create a sophisticated, aged metallic background, allowing lighter elements to shine.

text

For optimal readability, use a dark charcoal or black on the lighter backgrounds like #E0D3C7. On darker backgrounds, #E0D3C7 or a crisp off-white provides excellent contrast.

Accessibility notes

Ensure sufficient contrast for text, especially when using lighter bronze shades like #E0D3C7 on darker backgrounds.
Avoid using similar shades of bronze for text and background to prevent visual fatigue and readability issues.
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 Depth

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

#4A3A2F · #7B685B · #E0D3C7

Polished Victorian

Perfect for contrasting a polished light bronze against a darker base, ideal for UI elements or decorative motifs.

#6A5B4F · #B8A89A · #4A3A2F

Warm Patina

Ideal for a softer, more blended metallic background with subtle variations, suitable for decorative graphics or subtle textures.

#7B685B · #E0D3C7 · #6A5B4F

CSS variables

:root {
  --steampunk-gears-bronze-1: #4A3A2F;
  --steampunk-gears-bronze-2: #7B685B;
  --steampunk-gears-bronze-3: #B8A89A;
  --steampunk-gears-bronze-4: #E0D3C7;
  --steampunk-gears-bronze-5: #6A5B4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steampunk-gears-bronze": {
        1: "#4A3A2F",
        2: "#7B685B",
        3: "#B8A89A",
        4: "#E0D3C7",
        5: "#6A5B4F",
      }
    }
  }
}

Hex values

Color 1#4A3A2F

Color 2#7B685B

Color 3#B8A89A

Color 4#E0D3C7

Color 5#6A5B4F

Accessibility

Contrast checker

2.1:1Fail

4.7:1AA

7.4:1AAA

1.7:1Fail

2.1:1Fail

2.3:1Fail

3.6:1AA18

1.2:1Fail

4.7:1AA

2.3:1Fail

1.6:1Fail

2.8:1Fail

7.4:1AAA

3.6:1AA18

1.6:1Fail

4.4:1AA18

1.7:1Fail

1.2:1Fail

2.8:1Fail

4.4:1AA18

Similar palettes

More like Steampunk Gears Bronze

View all earth

Aged Bronze Relic

Aged Copper Patina

Ancient Map Parchment

Antique Copper Glow

Cogwheel Fantasy

Old Tome Wisdom