Palette

Clockwork Brass Patina

A rich, aged blend of brass and tarnished copper, reflecting the intricate gears and patinas of a steampunk machine.

darkretro5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Clockwork Brass Patina 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 Clockwork Brass Patina.

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

Data visualization

#B8860B#DAA520#D2B48C#2F4F4F#8B4513

Palette guide

How to use Clockwork Brass Patina

Overview

The Clockwork Brass Patina palette is a rich, evocative collection that transports designs to a world of vintage mechanics and aged elegance. Featuring deep brass tones like #B8860B and #DAA520, complemented by the warmth of #D2B48C (aged wood) and #8B4513 (tarnished copper), it's grounded by the sophisticated dark grey of #2F4F4F. This palette is perfect for projects demanding a retro, industrial, or steampunk aesthetic, providing a luxurious depth and a sense of history through its metallic and earthy hues.

Best used for

Steampunk-themed digital interfaces
Vintage branding and packaging
Industrial design concepts
Luxury goods and artisanal products
Retro gaming and fantasy art
Dark mode UI designs

Suggested color roles

primary

Use #B8860B or #DAA520 for main metallic elements, headings, or key interactive components.

secondary

Apply #8B4513 (dark copper) or #D2B48C (aged brass/wood) for complementary sections, borders, or textual accents.

accent

Utilize #2F4F4F as a deep, contrasting accent for shadows, dividers, or subtle background textures.

background

A rich #2F4F4F provides an excellent dark and sophisticated base, allowing brighter colors to pop.

text

For legibility on dark backgrounds, use #D2B48C or #DAA520. On lighter elements, dark charcoal or black is recommended.

Accessibility notes

Ensure high contrast for text, especially when pairing lighter brass tones with dark backgrounds.
Use #2F4F4F as a strong contrasting color for text on lighter elements like #D2B48C.
Avoid using similar brass tones for text and background to prevent readability issues.
Consider larger font sizes for body text to aid readability within this rich, dark palette.

Recommended combinations

Aged Brass & Steel

Creates a classic steampunk look, with bright brass highlights against a deep, industrial backdrop.

#DAA520 · #2F4F4F · #D2B48C

Copper & Patina

Ideal for evoking tarnished metals and rich, earthy textures with a strong, grounded feel.

#8B4513 · #B8860B · #2F4F4F

Vintage Elegance

Perfect for a softer, more refined vintage aesthetic, reminiscent of aged leather and polished brass.

#D2B48C · #DAA520 · #8B4513

CSS variables

:root {
  --clockwork-brass-patina-1: #B8860B;
  --clockwork-brass-patina-2: #DAA520;
  --clockwork-brass-patina-3: #D2B48C;
  --clockwork-brass-patina-4: #2F4F4F;
  --clockwork-brass-patina-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "clockwork-brass-patina": {
        1: "#B8860B",
        2: "#DAA520",
        3: "#D2B48C",
        4: "#2F4F4F",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#B8860B

Color 2#DAA520

Color 3#D2B48C

Color 4#2F4F4F

Color 5#8B4513

Accessibility

Contrast checker

1.5:1Fail

1.7:1Fail

2.7:1Fail

2.2:1Fail

1.5:1Fail

1.1:1Fail

4:1AA18

3.2:1AA18

1.7:1Fail

1.1:1Fail

4.5:1AA

3.6:1AA18

2.7:1Fail

4:1AA18

4.5:1AA

1.3:1Fail

2.2:1Fail

3.2:1AA18

3.6:1AA18

1.3:1Fail

Similar palettes

More like Clockwork Brass Patina

View all dark

Brass Cogs & Smoke

Industrial Steampunk Grit

Steampunk Gilded Gear

Steampunk Goggles

Film Noir Echo

Gilded Clockwork Gears