Palette

Steampunk Machine Hues

Gritty, metallic grays and muted tones reflecting the robust machinery of a steampunk world.

monochromeretro5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Steampunk Machine Hues 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 Machine Hues.

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

Data visualization

#424949#6D7B7B#A9B0AE#D8DFDF#2E3333

Palette guide

How to use Steampunk Machine Hues

Overview

The "Steampunk Machine Hues" palette is a robust, monochrome collection inspired by gritty, metallic machinery. It features a range of industrial greys, from the deep #2E3333 (Dark Slate) and #424949 (Charcoal) to the lighter, more reflective #6D7B7B (Cadet Gray) and #A9B0AE (Silver Chalice). The brightest tone, #D8DFDF (Light Gray), provides a clean, almost polished metallic sheen. This palette is ideal for projects that aim for a strong, functional, and unadorned aesthetic, emphasizing the raw beauty of engineered components and a no-nonsense industrial vibe.

Best used for

Industrial product design and renders
Technical documentation and schematics
Architectural visualization of factories
Minimalist branding for tech startups
Sci-fi game aesthetics and UI
Website design for manufacturing companies

Suggested color roles

primary

Use #2E3333 as the darkest, foundational color for prominent text, heavy borders, or solid backgrounds.

secondary

Apply #424949 for secondary elements, panels, or dark structural components.

accent

Highlight with #A9B0AE for polished metallic details, active states, or subtle indicators.

background

Utilize #D8DFDF as a clean, light background for interfaces or large display areas, mimicking brushed aluminum.

text

For optimal readability on light backgrounds, use #2E3333. For dark backgrounds, #D8DFDF provides crisp contrast.

Accessibility notes

Ensure sufficient contrast when using #6D7B7B for text on #A9B0AE backgrounds; consider larger font sizes.
The darkest #2E3333 offers excellent contrast for white or #D8DFDF text.
Avoid pairing #A9B0AE text on #D8DFDF as contrast will be insufficient for most users.
For body text, use #2E3333 on #D8DFDF, or #D8DFDF on #2E3333 for maximum readability.

Recommended combinations

Deep Machine Core

Creates a robust, heavy industrial feel, ideal for foundational elements.

#2E3333 · #424949 · #6D7B7B

Polished Metal Sheen

Evokes a clean, reflective metallic surface, suitable for highlights and clean interfaces.

#A9B0AE · #D8DFDF · #6D7B7B

High Contrast Structure

Provides clear visual hierarchy, perfect for data visualization or strong branding.

#2E3333 · #D8DFDF · #424949

CSS variables

:root {
  --steampunk-machine-hues-1: #424949;
  --steampunk-machine-hues-2: #6D7B7B;
  --steampunk-machine-hues-3: #A9B0AE;
  --steampunk-machine-hues-4: #D8DFDF;
  --steampunk-machine-hues-5: #2E3333;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steampunk-machine-hues": {
        1: "#424949",
        2: "#6D7B7B",
        3: "#A9B0AE",
        4: "#D8DFDF",
        5: "#2E3333",
      }
    }
  }
}

Hex values

Color 1#424949

Color 2#6D7B7B

Color 3#A9B0AE

Color 4#D8DFDF

Color 5#2E3333

Accessibility

Contrast checker

2.1:1Fail

4.2:1AA18

6.8:1AA

1.4:1Fail

2.1:1Fail

2:1Fail

3.3:1AA18

2.9:1Fail

4.2:1AA18

2:1Fail

1.6:1Fail

5.8:1AA