Back to palettes

Palette

Industrial Noir Edge

A sophisticated progression of dark, muted grays and blues, embodying a sleek industrial aesthetic.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1E212D#373A47#545864#737887#9B9FA9

Palette guide

How to use Industrial Noir Edge

Overview

The Industrial Noir Edge palette presents a sophisticated progression of dark, muted grays with subtle blue undertones, perfect for creating a sleek and modern industrial aesthetic. Anchored by deep hues like #1E212D and #373A47, it provides a solid foundation for immersive dark themes. Mid-tones such as #545864 and #737887 offer excellent options for layering and depth, ideal for distinguishing UI components or content blocks. The lightest shade, #9B9FA9, introduces a soft, metallic touch, providing a clear contrast for text and interactive elements. This palette is particularly effective for digital products, architectural portfolios, or branding that seeks a refined, cool, and contemporary feel.

Best used for

  • Enterprise software dashboards and interfaces
  • Automotive or luxury brand websites
  • Modern architecture and interior design presentations
  • Sci-fi themed game UI/UX
  • Technical documentation portals
  • High-tech product packaging

Suggested color roles

primary

#1E212D. Establish this deep, cool gray-blue as the dominant background color for a sophisticated and expansive dark canvas.

secondary

#373A47. Ideal for secondary containers, cards, or navigation bars, offering a slight lift from the primary background while maintaining depth.

accent

#545864. Use for subtle interactive elements, borders, or hover states to provide gentle visual cues without overpowering the overall dark theme.

background

#1E212D. The perfect choice for the main application background, setting a serious and professional tone that enhances readability of lighter text.

text

#9B9FA9. Excellent for primary body text on #1E212D or #373A47, providing good contrast. For headings or critical information, consider pure white for maximum readability.

Accessibility notes

  • #9B9FA9 on #1E212D or #373A47 generally offers good contrast for standard text sizes. Always verify with a contrast checker.
  • Avoid using #545864 or darker for small text against the deepest backgrounds, as it may fail WCAG AA contrast ratios.
  • Ensure interactive elements using #737887 or #9B9FA9 have clear focus states for keyboard navigation.
  • For maximum readability on critical text, consider utilizing a pure white text color, especially on #1E212D.

Recommended combinations

Deep Core

Forms the base for dark interfaces: #1E212D as primary background, #373A47 for panels, #9B9FA9 for main text.

#1E212D · #373A47 · #9B9FA9

Layered Depth

Creates visual hierarchy in content blocks, with #373A47 as base, #545864 for details, and #737887 for subheadings.

#373A47 · #545864 · #737887

Highlight Contrast

Use #1E212D as a deep canvas, #737887 for active states or icons, and #9B9FA9 for prominent headings.

#1E212D · #737887 · #9B9FA9

CSS variables

:root {
  --industrial-noir-edge-1: #1E212D;
  --industrial-noir-edge-2: #373A47;
  --industrial-noir-edge-3: #545864;
  --industrial-noir-edge-4: #737887;
  --industrial-noir-edge-5: #9B9FA9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-noir-edge": {
        1: "#1E212D",
        2: "#373A47",
        3: "#545864",
        4: "#737887",
        5: "#9B9FA9",
      }
    }
  }
}

Related searches

dark blue gray color schemeindustrial UI design colorscool dark aesthetic palettesleek monochrome colorsmodern gray blue branding

Palette colors

Hex values

Color 1#1E212D
·
Color 2#373A47
·
Color 3#545864
·
Color 4#737887
·
Color 5#9B9FA9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.3:1Fail
3.6:1AA18
6:1AA
2
1.4:1Fail
1.6:1Fail
2.6:1Fail
4.3:1AA18
3
2.3:1Fail
1.6:1Fail
1.6:1Fail
2.7:1Fail
4
3.6:1AA18
2.6:1Fail
1.6:1Fail
1.7:1Fail
5
6:1AA
4.3:1AA18
2.7:1Fail
1.7:1Fail

Similar palettes

More like Industrial Noir Edge

View all monochrome
Gritty Industrial Grey
Urban Grime Edge
Basalt Column Grey
Charcoal Smoke Hues
Gritty Factory Floor
Harvest Moon Dusk