Palette

Industrial Gear Grind

A stark, functional palette of deep grays, inspired by heavy machinery and industrial architecture.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Industrial Gear 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 Industrial Gear Grind.

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

Data visualization

#1A1A1A#333333#555555#888888#AAAAAA

Palette guide

How to use Industrial Gear Grind

Overview

The Industrial Gear Grind palette presents a stark, functional collection of deep grays, inspired by heavy machinery and industrial architecture. Ranging from the intense #1A1A1A to the lighter #AAAAAA, with versatile mid-tones like #555555, this monochrome palette offers designers and developers a strong, no-nonsense foundation. It's ideal for creating interfaces and branding that convey strength, precision, and a raw, unpolished aesthetic. The predictable contrast ratios ensure excellent readability and visual hierarchy, making it highly effective for technical applications, dark mode themes, or any project requiring a robust and minimalist design language.

Best used for

Dark mode web and app interfaces
Industrial manufacturing branding
Technical documentation platforms
Heavy equipment control panels
Minimalist architectural portfolios
Cybersecurity dashboards

Suggested color roles

primary

#1A1A1A - A profound, almost black, ideal for dominant structural elements, backgrounds, and primary branding to create a strong, dark mood.

secondary

#333333 - A slightly lighter dark grey for secondary content blocks, card backgrounds, or prominent text elements.

accent

#555555 - A versatile mid-tone grey, perfect for subtle highlights, interactive elements, or icons that need gentle emphasis in a dark theme.

background

#AAAAAA - A light mid-grey that serves as an excellent background for content areas, providing a clean canvas for darker text.

text

#1A1A1A - Optimal for primary body text on light backgrounds like #AAAAAA or #888888, ensuring high readability. A bright white works well on #1A1A1A.

Accessibility notes

Ensure high contrast between #1A1A1A text and #AAAAAA background to meet WCAG AA/AAA standards.
Avoid using #888888 text on #AAAAAA for small font sizes; contrast may be too low.
Always use white or a very light grey for text placed on #1A1A1A or #333333 to ensure legibility.
Verify contrast for interactive elements using #555555 against adjacent background colors.

Recommended combinations

Stark Contrast

Creates a powerful, high-contrast layout, excellent for headers, main content areas, and clear typography.

#1A1A1A · #333333 · #AAAAAA

Monochrome Layers

Ideal for building subtle visual layers and hierarchies in UI components, like cards or modals, with a smooth grey transition.

#AAAAAA · #888888 · #555555

Deep Gradients

Effective for defining visual hierarchy within components, using varied grey tones for different states or information levels.

#333333 · #555555 · #888888

CSS variables

:root {
  --industrial-gear-grind-4-1: #1A1A1A;
  --industrial-gear-grind-4-2: #333333;
  --industrial-gear-grind-4-3: #555555;
  --industrial-gear-grind-4-4: #888888;
  --industrial-gear-grind-4-5: #AAAAAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-gear-grind-4": {
        1: "#1A1A1A",
        2: "#333333",
        3: "#555555",
        4: "#888888",
        5: "#AAAAAA",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#333333

Color 3#555555

Color 4#888888

Color 5#AAAAAA

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

4.9:1AA

7.5:1AAA

1.4:1Fail

1.7:1Fail

3.6:1AA18

5.4:1AA

2.3:1Fail

1.7:1Fail

2.1:1Fail

3.2:1AA18

4.9:1AA

3.6:1AA18

2.1:1Fail

1.5:1Fail

7.5:1AAA

5.4:1AA

3.2:1AA18

1.5:1Fail

Similar palettes

More like Industrial Gear Grind

View all monochrome

Charcoal Smoke Hues

Gritty Factory Floor

Gritty Industrial Grey

Noir Film Shadows

Shadowed Alley Fog

Shadowed Obsidian