Back to palettes

Palette

Industrial Gear Grind

A stark, functional palette inspired by the raw, unpolished tones of industrial machinery and metal.

monochromeminimal5 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

#2C3E50#5D6D7E#979C9E#CCD1D1#EAECEE

Palette guide

How to use Industrial Gear Grind

Overview

The Industrial Gear Grind palette is a stark, functional collection inspired by the raw, unpolished tones of industrial machinery and metal. Ranging from the deep #2C3E50 to the very light #EAECEE, and including versatile mid-tones like #979C9E, this monochrome palette provides designers and developers with a robust foundation. It's perfect for creating interfaces and branding that convey strength, precision, and a modern, minimalist aesthetic. The predictable contrast ratios ensure excellent readability and visual hierarchy, making it highly effective for technical applications, corporate websites, or any project requiring a strong and reliable design language.

Best used for

  • Corporate tech interfaces
  • Industrial engineering branding
  • Modern minimalist websites
  • Data visualization dashboards
  • Automotive industry presentations
  • Architectural firm portfolios

Suggested color roles

primary

#2C3E50 - A deep, cool blue-grey, ideal for dominant structural elements, backgrounds, and primary branding to convey stability.

secondary

#5D6D7E - A slightly lighter, yet still deep, cool grey for secondary navigation, card backgrounds, or prominent text.

accent

#979C9E - A balanced mid-tone grey, perfect for subtle highlights, interactive elements, or icons that need gentle emphasis.

background

#EAECEE - A very light, almost white grey, ideal for a clean and expansive background, providing excellent contrast for text.

text

#2C3E50 - Optimal for primary body text on light backgrounds like #EAECEE or #CCD1D1, ensuring high readability. Use a bright white on #2C3E50.

Accessibility notes

  • Ensure strong contrast between #2C3E50 text and #EAECEE background to meet WCAG AA/AAA standards.
  • Avoid using #CCD1D1 text on #EAECEE for small font sizes; contrast may be too low.
  • Use white or a very light grey for text on #2C3E50 or #5D6D7E to ensure legibility.
  • Verify contrast for interactive elements using #979C9E against adjacent background colors.

Recommended combinations

Foundation & Light

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

#2C3E50 · #5D6D7E · #EAECEE

Metallic Layers

Ideal for building subtle visual layers and hierarchies in UI components, creating a smooth, metallic feel.

#EAECEE · #CCD1D1 · #979C9E

Mid-Tone Structure

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

#5D6D7E · #979C9E · #CCD1D1

CSS variables

:root {
  --industrial-gear-grind-1: #2C3E50;
  --industrial-gear-grind-2: #5D6D7E;
  --industrial-gear-grind-3: #979C9E;
  --industrial-gear-grind-4: #CCD1D1;
  --industrial-gear-grind-5: #EAECEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-gear-grind": {
        1: "#2C3E50",
        2: "#5D6D7E",
        3: "#979C9E",
        4: "#CCD1D1",
        5: "#EAECEE",
      }
    }
  }
}

Related searches

industrial grey color schememonochrome metal palettemodern corporate colorsui grey tonesminimalist industrial design

Palette colors

Hex values

Color 1#2C3E50
·
Color 2#5D6D7E
·
Color 3#979C9E
·
Color 4#CCD1D1
·
Color 5#EAECEE
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
4:1AA18
7.1:1AAA
9.3:1AAA
2
2.1:1Fail
1.9:1Fail
3.4:1AA18
4.5:1AA18
3
4:1AA18
1.9:1Fail
1.8:1Fail
2.3:1Fail
4
7.1:1AAA
3.4:1AA18
1.8:1Fail
1.3:1Fail
5
9.3:1AAA
4.5:1AA18
2.3:1Fail
1.3:1Fail

Similar palettes

More like Industrial Gear Grind

View all monochrome
Industrial Gear Grind
Industrial Steam Punk
Industrial Steel Dawn
Steel Beam Contrast
Steel Bridge Vista
Brushed Steel Aura