Back to palettes

Palette

Industrial Noir Canvas

A sophisticated grayscale, evoking the stark beauty of modern industrial architecture under a dark sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A1A#2C2C2C#4A4A4A#6A6A6A#8A8A8A

Palette guide

How to use Industrial Noir Canvas

Overview

The Industrial Noir Canvas palette offers a sophisticated grayscale foundation, ideal for projects demanding a stark, modern, and minimalist aesthetic. Featuring deep charcoals like #1A1A1A and #2C2C2C, it grounds designs with a powerful, immersive dark mode feel. Mid-tones such as #4A4A4A and #6A6A6A provide essential depth and hierarchy, perfect for dividing sections or subtle gradients. The lightest shade, #8A8A8A, serves as a soft highlight or secondary text color, ensuring readability without harshness. This palette is exceptionally versatile for user interfaces, branding, and digital art where elegance and a strong visual identity are paramount. Developers will appreciate its seamless integration into dark themes, offering a consistent and refined user experience across various platforms.

Best used for

  • Dark mode UI/UX design for web and mobile applications
  • Modern minimalist branding and logos
  • Architectural visualization and renders
  • High-end tech product interfaces
  • Digital art and photography portfolios
  • Sophisticated editorial layouts

Suggested color roles

primary

#1A1A1A. Use this profound charcoal as the dominant base for backgrounds and large containers to establish a deep, sophisticated dark theme.

secondary

#2C2C2C. Excellent for slightly elevated elements like cards, panels, or secondary navigation, providing subtle visual separation from the primary background.

accent

#4A4A4A. Apply this versatile mid-gray for borders, dividers, or subtle interactive states, offering gentle contrast without disrupting the dark mood.

background

#1A1A1A. The ideal choice for the main canvas, providing a rich, immersive dark environment that makes lighter elements pop.

text

#8A8A8A. Best for primary body text on darker backgrounds like #1A1A1A or #2C2C2C, ensuring good readability. For headings, #6A6A6A works well, or pure white for maximum impact.

Accessibility notes

  • Ensure sufficient contrast for text: #8A8A8A on #1A1A1A or #2C2C2C meets WCAG AA for large text but might be challenging for small body text. Consider pure white text for critical information.
  • Use #6A6A6A or #8A8A8A for interactive elements to provide visual feedback against darker backgrounds.
  • Avoid using #4A4A4A or darker for small text on #1A1A1A or #2C2C2C as contrast will be insufficient for readability.
  • Test color combinations with accessibility tools to verify WCAG compliance for all text and UI elements.

Recommended combinations

Deep Base

Ideal for core UI elements: #1A1A1A as background, #2C2C2C for cards, and #8A8A8A for readable body text.

#1A1A1A · #2C2C2C · #8A8A8A

Subtle Hierarchy

Creates layered content blocks: #2C2C2C base, #4A4A4A for dividers, #6A6A6A for secondary information.

#2C2C2C · #4A4A4A · #6A6A6A

Accent & Contrast

Use #1A1A1A as a strong base, #4A4A4A for UI elements, and #8A8A8A for highlights or key information.

#1A1A1A · #4A4A4A · #8A8A8A

CSS variables

:root {
  --industrial-noir-canvas-1: #1A1A1A;
  --industrial-noir-canvas-2: #2C2C2C;
  --industrial-noir-canvas-3: #4A4A4A;
  --industrial-noir-canvas-4: #6A6A6A;
  --industrial-noir-canvas-5: #8A8A8A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-noir-canvas": {
        1: "#1A1A1A",
        2: "#2C2C2C",
        3: "#4A4A4A",
        4: "#6A6A6A",
        5: "#8A8A8A",
      }
    }
  }
}

Related searches

dark gray color schemecharcoal black paletteminimalist dark UI colorsindustrial grayscale designmodern monochrome palette

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#2C2C2C
·
Color 3#4A4A4A
·
Color 4#6A6A6A
·
Color 5#8A8A8A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
2:1Fail
3.2:1AA18
5:1AA
2
1.2:1Fail
1.6:1Fail
2.6:1Fail
4:1AA18
3
2:1Fail
1.6:1Fail
1.6:1Fail
2.6:1Fail
4
3.2:1AA18
2.6:1Fail
1.6:1Fail
1.6:1Fail
5
5:1AA
4:1AA18
2.6:1Fail
1.6:1Fail

Similar palettes

More like Industrial Noir Canvas

View all dark
Charcoal Depths
Black Shard Reflection
Volcanic Glass Heart
Asteroid Belt Shadow
Basalt Edge
City Neon Rain