Palette

Steampunk Clockwork Gears

Industrial browns and muted tones evocative of polished brass and aged mechanisms.

earthretro5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7A5B49#B08D79#DACBBF#4E3E34#2A211D

Palette guide

How to use Steampunk Clockwork Gears

Overview

The Steampunk Clockwork Gears palette is a sophisticated collection of industrial browns and muted tones, meticulously crafted to evoke the polished brass and aged mechanisms of a bygone era. Featuring deep, rich browns like #7A5B49 and #4E3E34, it establishes a robust, earthy foundation. Lighter, more weathered shades such as #B08D79 and #DACBBF add texture and depth, while the near-black #2A211D provides stark contrast. This palette is invaluable for designers and developers aiming for a retro, mechanical, or vintage aesthetic. It seamlessly blends warmth with an industrial edge, perfect for projects demanding an authentic, intricate, and somewhat antique feel.

Best used for

Steampunk game environments and character design
Antique restoration websites or blogs
Rustic and industrial interior design concepts
Historical fiction book covers and illustrations
Artisan craft websites and branding
UI for vintage-themed applications

Suggested color roles

primary

Utilize #7A5B49 or #4E3E34 as dominant colors for large sections, backgrounds, or primary structural elements to set a strong, aged tone.

secondary

Employ #B08D79 and #DACBBF for secondary content areas, subheadings, or decorative patterns that require a lighter, weathered touch.

accent

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

background

Deep browns like #4E3E34 or #2A211D create a sturdy, immersive background, allowing lighter elements to appear as aged metal.

text

For optimal readability, use #DACBBF or a crisp off-white on the darkest backgrounds. On lighter browns like #B08D79, a deep charcoal or black is recommended.

Accessibility notes

Ensure sufficient contrast when placing light text on darker brown backgrounds, especially with #7A5B49 or #4E3E34.
Avoid using #B08D79 for small text on #DACBBF 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

Aged Mechanics

Excellent for creating deep, layered backgrounds with a clear hierarchy and a touch of aged brass.

#4E3E34 · #7A5B49 · #B08D79

Polished Detail

Ideal for stark contrast, using the lightest shade for prominent text or highlights against a very dark base.

#2A211D · #DACBBF · #7A5B49

Rustic Gears

Perfect for softer, more blended elements or backgrounds that require a gentler, weathered appearance.

#7A5B49 · #B08D79 · #DACBBF

CSS variables

:root {
  --steampunk-clockwork-gears-1: #7A5B49;
  --steampunk-clockwork-gears-2: #B08D79;
  --steampunk-clockwork-gears-3: #DACBBF;
  --steampunk-clockwork-gears-4: #4E3E34;
  --steampunk-clockwork-gears-5: #2A211D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steampunk-clockwork-gears": {
        1: "#7A5B49",
        2: "#B08D79",
        3: "#DACBBF",
        4: "#4E3E34",
        5: "#2A211D",
      }
    }
  }
}

Hex values

Color 1#7A5B49

Color 2#B08D79

Color 3#DACBBF

Color 4#4E3E34

Color 5#2A211D

Accessibility

Contrast checker

2:1Fail

3.9:1AA18

1.7:1Fail

2.6:1Fail

2:1Fail

1.9:1Fail

3.4:1AA18

5.2:1AA

3.9:1AA18

1.9:1Fail

6.4:1AA

10:1AAA

1.7:1Fail

3.4:1AA18

6.4:1AA

1.5:1Fail

2.6:1Fail

5.2:1AA

10:1AAA

1.5:1Fail

Similar palettes

More like Steampunk Clockwork Gears