Palette

Industrial Steampunk Grit

A rugged blend of coppers, bronzes, and distressed leathers, echoing the gears and grime of steampunk design.

darkretro5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A3A2C#7D6B5A#AF9B8A#D1C5B5#E3DDCF

Palette guide

How to use Industrial Steampunk Grit

Overview

The Industrial Steampunk Grit palette offers a rugged blend of coppers, bronzes, and distressed leathers, echoing the gears and grime of classic steampunk design. Ranging from the deep, earthy #4A3A2C to the light, almost parchment-like #E3DDCF, this palette provides a warm, vintage, and textural foundation. Mid-tones like #7D6B5A, #AF9B8A, and #D1C5B5 offer excellent opportunities for creating visual depth and hierarchy, perfect for layered interfaces or textured backgrounds. This palette is exceptionally suited for projects seeking a rich, historical, and adventurous feel, ideal for brands that value craftsmanship, intricate details, and a touch of retro charm.

Best used for

Steampunk-themed branding and websites
Vintage game UI/UX design
Artisan craft product packaging
Historical fiction book covers or web layouts
Retro-futuristic art and illustration
Interior design with a focus on aged wood and metal

Suggested color roles

primary

#4A3A2C. This deep, earthy brown serves as a strong, grounding background, evoking aged leather or dark wood.

secondary

#7D6B5A. A warmer, medium brown, ideal for secondary panels, cards, or navigation, offering subtle contrast against the primary.

accent

#AF9B8A. This lighter, desaturated brown offers a subtle metallic or aged parchment feel, perfect for interactive elements or highlights.

background

#4A3A2C. An excellent choice for the main canvas, creating a warm, textured, and immersive environment that highlights the palette's vintage character.

text

#D1C5B5. This light, warm beige provides good readability for primary text on #4A3A2C or #7D6B5A. For headings, consider #E3DDCF or a dark charcoal.

Accessibility notes

#D1C5B5 on #4A3A2C or #7D6B5A should be checked for WCAG AA compliance, especially for small text.
Ensure interactive elements using #AF9B8A have clear hover and focus states against similar warm backgrounds.
Avoid using #7D6B5A or #4A3A2C for text on similarly dark backgrounds; contrast will be insufficient.
The warm, muted tones can make contrast challenging; consider using the lightest shades for critical text.

Recommended combinations

Deep Vintage Base

Forms a rich, aged UI: #4A3A2C for background, #7D6B5A for panels, #D1C5B5 for primary text.

#4A3A2C · #7D6B5A · #D1C5B5

Layered Texture

Creates depth with warm tones: #7D6B5A as base, #AF9B8A for details, #E3DDCF for highlights.

#7D6B5A · #AF9B8A · #E3DDCF

Gritty Contrast

Use #4A3A2C as a deep canvas, #AF9B8A for prominent accents, and #E3DDCF for clear headings.

#4A3A2C · #AF9B8A · #E3DDCF

CSS variables

:root {
  --industrial-steampunk-grit-1: #4A3A2C;
  --industrial-steampunk-grit-2: #7D6B5A;
  --industrial-steampunk-grit-3: #AF9B8A;
  --industrial-steampunk-grit-4: #D1C5B5;
  --industrial-steampunk-grit-5: #E3DDCF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-steampunk-grit": {
        1: "#4A3A2C",
        2: "#7D6B5A",
        3: "#AF9B8A",
        4: "#D1C5B5",
        5: "#E3DDCF",
      }
    }
  }
}

Hex values

Color 1#4A3A2C

Color 2#7D6B5A

Color 3#AF9B8A

Color 4#D1C5B5

Color 5#E3DDCF

Accessibility

Contrast checker

2.1:1Fail

4.1:1AA18

6.4:1AA

8:1AAA

2.1:1Fail

1.9:1Fail

3:1Fail

3.8:1AA18

4.1:1AA18

1.9:1Fail

1.6:1Fail

2:1Fail

6.4:1AA

3:1Fail

1.6:1Fail

1.3:1Fail

8:1AAA

3.8:1AA18

2:1Fail

1.3:1Fail

Similar palettes

More like Industrial Steampunk Grit

View all dark

Clockwork Brass Patina

Steampunk Inventor's Workshop

Aged Scotch Library

Brass Cogs & Smoke

Film Noir Echo

Gilded Clockwork Gears