Back to palettes

Palette

Industrial Grid Noir

A stark, minimalist gradient of deep grays, embodying the raw, unadorned aesthetic of urban industrial spaces.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Industrial Grid Noir 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 Grid Noir.

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

Data visualization

#202020#404040#606060#808080#A0A0A0

Palette guide

How to use Industrial Grid Noir

Overview

The "Industrial Grid Noir" palette presents a stark, minimalist gradient of deep grays, embodying the raw, unadorned aesthetic of urban industrial spaces. This monochrome palette ranges from the near-black #202020 to the lighter #A0A0A0, providing a sophisticated foundation for dark mode interfaces and architectural designs. #404040 and #606060 offer excellent mid-tones for panels and secondary elements, while #808080 serves as a versatile accent or text color. Ideal for creating a serious, focused, and immersive user experience, this palette excels in conveying depth and structure without relying on vibrant colors. Designers will find it perfect for clean, robust digital products.

Best used for

  • Dark mode UI/UX designs
  • Cybersecurity dashboards
  • Architectural visualization renders
  • High-end tech brand websites
  • Urban photography portfolios
  • Minimalist app interfaces

Suggested color roles

primary

A deep, commanding base for main backgrounds or large content blocks. Use #202020 to establish a strong, dark foundation.

secondary

A versatile mid-dark gray for panels, cards, or borders. Apply #404040 to add structure and subtle visual breaks.

accent

A lighter gray that stands out effectively against darker tones. #808080 works well for interactive elements or key data points.

background

An immersive, near-black backdrop. #202020 creates a sophisticated, focus-driven environment.

text

For primary text, #A0A0A0 provides excellent readability on #202020 or #404040. For secondary text or subtle labels, #808080 is suitable.

Accessibility notes

  • Ensure #A0A0A0 text on #202020 background meets WCAG contrast requirements for body text.
  • Avoid using adjacent grays like #404040 and #606060 for text/background without checking contrast ratios.
  • For interactive elements, ensure sufficient visual distinction beyond just color, e.g., hover states or iconography.
  • Consider using a pure white text on #202020 for headings or critical information to maximize impact and readability.

Recommended combinations

Deep Foundation

Ideal for dark mode applications, using #202020 as background, #404040 for cards, and #A0A0A0 for primary text.

#202020 · #404040 · #A0A0A0

Subtle Layers

Create nuanced depth for complex dashboards or layered information displays, with #808080 as an accent or highlight.

#404040 · #606060 · #808080

Highlighted Data

Use #808080 for data points or icons against a #202020 background, with #A0A0A0 for supporting text, offering clear distinction.

#202020 · #808080 · #A0A0A0

CSS variables

:root {
  --industrial-grid-noir-1: #202020;
  --industrial-grid-noir-2: #404040;
  --industrial-grid-noir-3: #606060;
  --industrial-grid-noir-4: #808080;
  --industrial-grid-noir-5: #A0A0A0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-grid-noir": {
        1: "#202020",
        2: "#404040",
        3: "#606060",
        4: "#808080",
        5: "#A0A0A0",
      }
    }
  }
}

Related searches

dark grey color palettemonochrome ui designurban industrial colorsminimalist dark themegrey scale branding

Palette colors

Hex values

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

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4.1:1AA18
6.2:1AA
2
1.6:1Fail
1.6:1Fail
2.6:1Fail
4:1AA18
3
2.6:1Fail
1.6:1Fail
1.6:1Fail
2.4:1Fail
4
4.1:1AA18
2.6:1Fail
1.6:1Fail
1.5:1Fail
5
6.2:1AA
4:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Industrial Grid Noir

View all dark
Smokestack Iron Grind
Charcoal Depths
Distressed Concrete Grit
Factory Floor Rust
Industrial Ember Glow
Midnight Alley Tale