Back to palettes

Palette

Smokestack Iron Grind

A raw and gritty palette inspired by the stark, shadowed surfaces of an abandoned industrial complex.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Smokestack Iron Grind 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 Smokestack Iron Grind.

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

Data visualization

#202020#404040#606060#808080#101010

Palette guide

How to use Smokestack Iron Grind

Overview

The Smokestack Iron Grind palette is a raw and gritty collection of pure grays, inspired by the stark, shadowed surfaces of industrial complexes. Ranging from the profound #101010 and #202020 to the lighter, versatile #808080, this monochromatic spectrum is perfect for projects that demand a bold, industrial, or minimalist aesthetic with a strong, no-nonsense character. Designers can leverage these shades to create impactful digital interfaces, urban branding, or powerful artistic statements. Developers will find these colors exceptionally useful for dark mode themes, command-line interfaces, or applications where a stark, functional, and modern look is paramount, ensuring clarity and focus.

Best used for

  • Industrial or grunge-themed websites
  • Tech and cybersecurity interfaces
  • Urban fashion branding
  • Command-line interfaces (CLI)
  • Photography portfolios with a stark aesthetic
  • Heavy machinery or construction marketing

Suggested color roles

primary

#101010 - The deepest black, ideal for dominant backgrounds, headers, or powerful brand elements, establishing a strong foundation.

secondary

#202020 - A very dark gray, excellent for subheadings, navigation, or large content blocks, maintaining the dark, industrial feel.

accent

#606060 - A versatile mid-gray, perfect for subtle highlights, borders, or interactive elements that need to stand out without being flashy.

background

#404040 - A dark, solid gray that provides a strong, modern canvas for content, ensuring readability with light text.

text

#808080 - A lighter gray that offers good contrast against the darker hues, ensuring clear readability for body text and labels.

Accessibility notes

  • Ensure #808080 text has sufficient contrast against darker backgrounds like #101010, #202020, and #404040.
  • The darkest shades, #101010 and #202020, provide excellent contrast for white or very light text.
  • Avoid using #606060 for small text on #808080 as contrast will be insufficient.
  • Check interactive elements to ensure their color states meet WCAG contrast guidelines for usability.

Recommended combinations

Industrial Core

A stark foundation with light text and a mid-tone for secondary elements, perfect for dark themes.

#101010 · #808080 · #404040

Gritty UI

Creates a layered, modern interface with clear hierarchy and a strong, consistent look.

#202020 · #606060 · #404040

Metal Contrast

Light gray background with dark text and a mid-tone for accents, suitable for minimal designs.

#808080 · #101010 · #606060

CSS variables

:root {
  --smokestack-iron-grind-1: #202020;
  --smokestack-iron-grind-2: #404040;
  --smokestack-iron-grind-3: #606060;
  --smokestack-iron-grind-4: #808080;
  --smokestack-iron-grind-5: #101010;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smokestack-iron-grind": {
        1: "#202020",
        2: "#404040",
        3: "#606060",
        4: "#808080",
        5: "#101010",
      }
    }
  }
}

Related searches

dark industrial color palettegrunge grey aestheticminimalist dark themeurban web design colorsmonochromatic grey UI

Palette colors

Hex values

Color 1#202020
·
Color 2#404040
·
Color 3#606060
·
Color 4#808080
·
Color 5#101010
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4.1:1AA18
1.2:1Fail
2
1.6:1Fail
1.6:1Fail
2.6:1Fail
1.8:1Fail
3
2.6:1Fail
1.6:1Fail
1.6:1Fail
3:1AA18
4
4.1:1AA18
2.6:1Fail
1.6:1Fail
4.8:1AA
5
1.2:1Fail
1.8:1Fail
3:1AA18
4.8:1AA

Similar palettes

More like Smokestack Iron Grind

View all dark
Distressed Concrete Grit
Industrial Grid Noir
Urban Grime Chic
Urban Grunge Alley
Urban Grunge Soul
Charcoal Depths