Palette

Rusty Gears Steam

Captures the essence of an old workshop, with the deep tones of aged metal and the warm glow of industry.

earthretro5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rusty Gears Steam 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 Rusty Gears Steam.

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

Data visualization

#4A3B31#755038#A36F49#D8A46B#E7E3D3

Palette guide

How to use Rusty Gears Steam

Overview

The Rusty Gears Steam palette captures the essence of an old workshop, blending deep, aged metals with warm glows, perfect for retro, industrial, or steampunk themes. It grounds itself with the rich #4A3B31 (dark sepia brown) and #755038 (warm umber), gradually lightening to the inviting #A36F49 and the luminous #D8A46B (aged brass). The palette is completed by the soft, creamy #E7E3D3, reminiscent of steam or old parchment. This collection is ideal for designers and developers looking to create experiences imbued with vintage charm, mechanical intricacy, and a cozy, inviting warmth across various digital and print applications.

Best used for

Steampunk and vintage-themed branding
Artisan coffee shop and bakery aesthetics
Retro game UI and environment design
Historical fiction book covers and illustrations
Antique restoration websites and blogs
Product packaging for handcrafted goods

Suggested color roles

primary

Utilize #4A3B31 as the solid, grounding base for major layout elements, providing depth and a vintage feel.

secondary

Apply #755038 for supporting content blocks or textural backgrounds, building on the warm, aged aesthetic.

accent

Employ #D8A46B (aged brass) for key highlights, metallic details, or interactive elements that need a warm, inviting glow.

background

Use #E7E3D3 (creamy white) for a clean, soft background that makes darker elements pop, or #4A3B31 for a cozy, dark aesthetic.

text

For light backgrounds like #E7E3D3, use #4A3B31 for primary text. For dark backgrounds, a very light cream or white (not in palette) is recommended.

Accessibility notes

Ensure #E7E3D3 provides sufficient contrast when used as text on #4A3B31, #755038, and #A36F49 backgrounds.
Be cautious when using #D8A46B for small text on mid-tone backgrounds, as contrast may be challenging.
Prioritize #4A3B31 for body text on lighter backgrounds to ensure optimal readability for all users.
Test color combinations for WCAG AA compliance, especially for interactive elements and form fields.

Recommended combinations

Workshop Charm

Ideal for a hero section: #4A3B31 background, #E7E3D3 headline, and #D8A46B for a key call to action.

#4A3B31 · #E7E3D3 · #D8A46B

Aged Patina

Creates a rich, layered effect for content blocks or image captions, evoking worn metal and aged wood.

#755038 · #A36F49 · #4A3B31

Soft Steam

Use #E7E3D3 as a clean background, #4A3B31 for primary text, and #A36F49 for warm accents or links.

#E7E3D3 · #4A3B31 · #A36F49

CSS variables

:root {
  --rusty-gears-steam-1: #4A3B31;
  --rusty-gears-steam-2: #755038;
  --rusty-gears-steam-3: #A36F49;
  --rusty-gears-steam-4: #D8A46B;
  --rusty-gears-steam-5: #E7E3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rusty-gears-steam": {
        1: "#4A3B31",
        2: "#755038",
        3: "#A36F49",
        4: "#D8A46B",
        5: "#E7E3D3",
      }
    }
  }
}

Hex values

Color 1#4A3B31

Color 2#755038

Color 3#A36F49

Color 4#D8A46B

Color 5#E7E3D3

Accessibility

Contrast checker

1.5:1Fail

2.5:1Fail

4.8:1AA

8.3:1AAA

1.5:1Fail

1.7:1Fail

3.2:1AA18

5.5:1AA

2.5:1Fail

1.7:1Fail

1.9:1Fail

3.3:1AA18

4.8:1AA

3.2:1AA18

1.9:1Fail

1.7:1Fail

8.3:1AAA

5.5:1AA

3.3:1AA18

1.7:1Fail

Similar palettes

More like Rusty Gears Steam

Rusty Gears Steam

See it in context.

Ready when you are.

Built with Rusty Gears Steam.

How to use Rusty Gears Steam

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Workshop Charm

Aged Patina

Soft Steam

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Rusty Gears Steam