Palette

Steampunk Foundry Grime

Gritty, metallic tones capturing the rugged, aged aesthetic of a steampunk industrial workshop.

Darkdark5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Steampunk Foundry Grime 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 Foundry Grime.

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

Data visualization

#4C3D2F#8B4513#2C3539#B87333#36454F

Palette guide

How to use Steampunk Foundry Grime

Overview

The Steampunk Foundry Grime palette delivers gritty, metallic tones, perfectly capturing the rugged, aged aesthetic of a steampunk industrial workshop. It features a robust foundation of dark grays and browns: #4C3D2F (Dark Taupe), #2C3539 (Gunmetal), and #36454F (Charcoal). These are powerfully contrasted by the warm, aged metallic accents of #8B4513 (Saddle Brown) and #B87333 (Bronze). This collection is invaluable for designers and developers aiming to create a dark, industrial, or grunge-inspired aesthetic. It provides a strong, masculine feel, ideal for projects that require a sense of history, wear, and mechanical robustness, making elements feel grounded and authentic.

Best used for

Dark mode interfaces for industrial applications
Grunge or distressed website designs
Game environments depicting factories or workshops
Heavy machinery or automotive branding
Industrial art and photography portfolios
Steampunk-themed digital illustrations

Suggested color roles

primary

Utilize #4C3D2F or #2C3539 as the dominant background or base colors to establish a dark, gritty industrial atmosphere.

secondary

Employ #36454F for secondary content blocks, borders, or as a deeper shade for textured elements, adding subtle variation.

accent

Reserve #8B4513 and #B87333 for striking calls-to-action, important icons, or to simulate aged brass and copper details.

background

The deepest shades like #2C3539 or #36454F serve as excellent, immersive backgrounds, allowing the metallic accents to truly stand out.

text

For optimal readability on these dark backgrounds, use a crisp white or a very light gray. On lighter metallic accents, a dark charcoal or black is recommended.

Accessibility notes

Prioritize high contrast for all text and interactive elements, often requiring white or very light gray on dark backgrounds.
Avoid using similar dark grays or browns for text and background to prevent readability issues.
Test color pairings extensively to ensure compliance with WCAG standards for interactive components.
Consider using larger font sizes and bolding for critical information to enhance readability on darker, textured backgrounds.

Recommended combinations

Deep Foundry

Excellent for a dark, layered background with a prominent bronze highlight, ideal for hero sections or headers.

#2C3539 · #4C3D2F · #B87333

Gritty Mechanism

Perfect for simulating aged, grimy metal with a touch of rust, suitable for textured backgrounds or detailed illustrations.

#36454F · #8B4513 · #4C3D2F

Industrial Contrast

Ideal for contrasting warm bronze accents against a cool, dark gray, creating focal points in UI or infographics.

#4C3D2F · #B87333 · #2C3539

CSS variables

:root {
  --steampunk-foundry-grime-1: #4C3D2F;
  --steampunk-foundry-grime-2: #8B4513;
  --steampunk-foundry-grime-3: #2C3539;
  --steampunk-foundry-grime-4: #B87333;
  --steampunk-foundry-grime-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steampunk-foundry-grime": {
        1: "#4C3D2F",
        2: "#8B4513",
        3: "#2C3539",
        4: "#B87333",
        5: "#36454F",
      }
    }
  }
}

Hex values

Color 1#4C3D2F

Color 2#8B4513

Color 3#2C3539

Color 4#B87333

Color 5#36454F

Accessibility

Contrast checker

1.5:1Fail

1.2:1Fail

2.7:1Fail

1.1:1Fail

1.5:1Fail

1.8:1Fail

1.9:1Fail

1.4:1Fail

1.2:1Fail

1.8:1Fail

3.3:1AA18

1.3:1Fail

2.7:1Fail

1.9:1Fail

3.3:1AA18

2.6:1Fail

1.1:1Fail

1.4:1Fail

1.3:1Fail

2.6:1Fail

Similar palettes

More like Steampunk Foundry Grime

View all Dark

Ancient Bronze Ritual

Arid Dusk Hues

Gothic Garden Nocturne

Midnight Ocean Depths

Night City Gleam

Rainy City Nights