Back to palettes

Palette

Industrial Steam Punk

Gritty, metallic grays and deep charcoals embodying the robust, functional aesthetic of steampunk machinery.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Industrial Steam Punk 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 Steam Punk.

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

Data visualization

#B2BEB5#8C8C8C#666666#444444#222222

Palette guide

How to use Industrial Steam Punk

Overview

The Industrial Steam Punk palette embodies the robust, functional aesthetic of steampunk machinery through its range of gritty, metallic grays and deep charcoals. From the cool, light gray of #B2BEB5 to the profound darkness of #222222, this palette provides a strong monochromatic foundation. Mid-tones like #8C8C8C, #666666, and #444444 offer essential depth and versatility for creating layered textures and visual hierarchy. It's exceptionally well-suited for designs that aim for a rugged yet sophisticated, vintage yet mechanical feel, perfect for user interfaces, branding, or digital art that evokes a classic industrial era with a futuristic twist.

Best used for

  • Steampunk-themed game UI/UX
  • Industrial machinery branding and websites
  • Urban exploration photography layouts
  • Modern minimalist product design
  • Technical documentation portals
  • Dark mode interfaces with a metallic edge

Suggested color roles

primary

#222222. This deep charcoal acts as a powerful, grounding background, establishing a dark and immersive steampunk aesthetic.

secondary

#444444. A slightly lighter dark gray, ideal for secondary panels, cards, or navigation, offering subtle contrast against the primary.

accent

#8C8C8C. Use this neutral gray for interactive elements, borders, or subtle highlights, providing a metallic sheen and visual interest.

background

#222222. An excellent choice for the main canvas, creating a dark, robust environment that makes lighter metallic elements stand out.

text

#B2BEB5. This lightest, cool gray provides good readability for primary text on #222222 or #444444. For headings, consider pure white for maximum impact.

Accessibility notes

  • #B2BEB5 on #222222 or #444444 should meet WCAG AA for normal text; always verify contrast ratios, especially for small text.
  • Ensure interactive elements using #8C8C8C have clear hover and focus states against similar dark backgrounds.
  • Avoid using #666666 or darker for text on #222222 or #444444, as contrast will be insufficient.
  • The monochromatic nature of this palette makes it easier to maintain visual consistency, but careful contrast checking is still crucial.

Recommended combinations

Deep Metal Base

Forms a strong dark UI: #222222 for background, #444444 for panels, #B2BEB5 for primary text.

#222222 · #444444 · #B2BEB5

Layered Greys

Creates depth in content: #444444 as base, #666666 for borders, #8C8C8C for secondary information.

#444444 · #666666 · #8C8C8C

Metallic Highlight

Use #222222 as a deep canvas, #8C8C8C for prominent accents, and #B2BEB5 for clear headings.

#222222 · #8C8C8C · #B2BEB5

CSS variables

:root {
  --industrial-steam-punk-1: #B2BEB5;
  --industrial-steam-punk-2: #8C8C8C;
  --industrial-steam-punk-3: #666666;
  --industrial-steam-punk-4: #444444;
  --industrial-steam-punk-5: #222222;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-steam-punk": {
        1: "#B2BEB5",
        2: "#8C8C8C",
        3: "#666666",
        4: "#444444",
        5: "#222222",
      }
    }
  }
}

Related searches

steampunk color schemeindustrial gray palettedark metallic UI colorsrugged monochrome designurban gray aesthetic

Palette colors

Hex values

Color 1#B2BEB5
·
Color 2#8C8C8C
·
Color 3#666666
·
Color 4#444444
·
Color 5#222222
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3:1Fail
5.1:1AA
8.3:1AAA
2
1.7:1Fail
1.7:1Fail
2.9:1Fail
4.7:1AA
3
3:1Fail
1.7:1Fail
1.7:1Fail
2.8:1Fail
4
5.1:1AA
2.9:1Fail
1.7:1Fail
1.6:1Fail
5
8.3:1AAA
4.7:1AA
2.8:1Fail
1.6:1Fail

Similar palettes

More like Industrial Steam Punk

View all monochrome
Industrial Gear Grind
Industrial Gear Grind
Industrial Steel Dawn
Steel Beam Contrast
Steel Bridge Vista
Urban Graphite Soul