Back to palettes

Palette

Industrial Gear Grind

A robust, functional monochrome reflecting the gritty, metallic tones of heavy industrial machinery.

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

#36454F#5A6A78#8D9BAA#C0CEDD#2B3B45

Palette guide

How to use Industrial Gear Grind

Overview

The Industrial Gear Grind palette offers a robust, functional monochrome reflecting the gritty, metallic tones of heavy industrial machinery. Ranging from the deep #36454F to the lighter #C0CEDD, and including the versatile #5A6A78, this collection provides designers and developers with a strong foundation for creating structured and reliable digital experiences. It ensures excellent contrast and visual hierarchy, making it ideal for interfaces that demand clarity and a no-nonsense aesthetic. Leverage these shades to build powerful, consistent designs across web applications, technical documentation, or branding that conveys strength and precision.

Best used for

  • Heavy machinery interfaces
  • Technical software dashboards
  • Industrial equipment branding
  • Monochrome website designs
  • Engineering and construction firms
  • Data visualization platforms

Suggested color roles

primary

#36454F - A deep, cool charcoal, perfect for primary navigation, footers, or strong background sections, anchoring the design.

secondary

#2B3B45 - A slightly darker and richer grey, excellent for prominent buttons, active states, or deep shadow effects.

accent

#5A6A78 - A balanced mid-grey, ideal for subtle highlights, interactive elements, or icons that need gentle emphasis without being too bright.

background

#C0CEDD - A light, cool grey that serves as an excellent content background, providing a clean and breathable canvas.

text

#36454F - Optimal for primary body text on light backgrounds like #C0CEDD or #8D9BAA, ensuring high readability. A bright white works on #36454F.

Accessibility notes

  • Ensure high contrast between #36454F text and #C0CEDD backgrounds to meet WCAG AA/AAA standards.
  • Avoid placing #8D9BAA text on #C0CEDD for small font sizes due to insufficient contrast.
  • Use white or a very light grey for text on #36454F or #2B3B45 to ensure legibility.
  • Verify contrast for interactive elements using #5A6A78 against adjacent background colors.

Recommended combinations

High Contrast Base

Creates a stark, readable layout, perfect for headers, main content, and critical information areas.

#36454F · #2B3B45 · #C0CEDD

Metallic Gradient

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

#C0CEDD · #8D9BAA · #5A6A78

Gritty Depth

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

#36454F · #5A6A78 · #8D9BAA

CSS variables

:root {
  --industrial-gear-grind-2-1: #36454F;
  --industrial-gear-grind-2-2: #5A6A78;
  --industrial-gear-grind-2-3: #8D9BAA;
  --industrial-gear-grind-2-4: #C0CEDD;
  --industrial-gear-grind-2-5: #2B3B45;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-gear-grind-2": {
        1: "#36454F",
        2: "#5A6A78",
        3: "#8D9BAA",
        4: "#C0CEDD",
        5: "#2B3B45",
      }
    }
  }
}

Related searches

industrial grey palettemetallic monochrome designdark grey ui colorsmechanical theme colorsheavy industry web design

Palette colors

Hex values

Color 1#36454F
·
Color 2#5A6A78
·
Color 3#8D9BAA
·
Color 4#C0CEDD
·
Color 5#2B3B45
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.5:1AA18
6.2:1AA
1.2:1Fail
2
1.8:1Fail
2:1Fail
3.5:1AA18
2.1:1Fail
3
3.5:1AA18
2:1Fail
1.8:1Fail
4.1:1AA18
4
6.2:1AA
3.5:1AA18
1.8:1Fail
7.2:1AAA
5
1.2:1Fail
2.1:1Fail
4.1:1AA18
7.2:1AAA

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