Palette

Industrial Steel Gaze

A range of steely grays reflecting the sleek and robust nature of industrial architecture.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Industrial Steel Gaze 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 Steel Gaze.

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

Data visualization

#303030#5A5A5A#8F8F8F#C0C0C0#DCDCDC

Palette guide

How to use Industrial Steel Gaze

Overview

The Industrial Steel Gaze palette features a range of steely grays, reflecting the sleek and robust nature of industrial architecture. From the deep #303030 to the luminous #DCDCDC, with versatile mid-tones like #8F8F8F, this collection provides designers and developers with a sophisticated, clean, and modern foundation. It's perfectly suited for projects requiring a sense of precision, strength, and understated elegance. Utilize these harmonious grays to build interfaces and branding that feel polished, durable, and highly functional, embracing a minimalist industrial aesthetic.

Best used for

Tech product interfaces and dashboards
Architectural firm portfolios
Automotive brand identity
Minimalist website designs
Luxury industrial goods branding
Data visualization platforms

Suggested color roles

primary

#303030 acts as a strong, anchoring color for headers, main navigation, or primary graphical elements, providing gravitas.

secondary

#5A5A5A is great for supporting content, subtle dividers, or backgrounds for secondary UI components, adding depth.

accent

#C0C0C0 serves as a bright accent for interactive elements, subtle highlights, or metallic sheen, catching the eye.

background

#DCDCDC offers a clean, light base for content, ensuring high readability and a fresh, open feel.

text

#303030 provides excellent contrast for body text on lighter backgrounds like #DCDCDC, ensuring optimal readability.

Accessibility notes

Ensure #303030 or #5A5A5A text on #DCDCDC provides sufficient contrast for readability (WCAG AA).
Avoid using #8F8F8F text on #C0C0C0 backgrounds due to low contrast, hindering readability.
Use a contrast checker to verify all text and background color combinations meet accessibility standards.
For critical information, prioritize higher contrast pairings to ensure universal readability.

Recommended combinations

Sleek UI Base

For light mode interfaces, with #DCDCDC as background, #5A5A5A for elements, and #303030 for text/icons.

#DCDCDC · #5A5A5A · #303030

Metallic Depth

Create a sense of layered metallic textures or a gradient effect for industrial designs.

#303030 · #8F8F8F · #C0C0C0

Clean Contrast

High contrast for main content, using #DCDCDC as background, #303030 for primary text, and #5A5A5A for secondary.

#DCDCDC · #303030 · #5A5A5A

CSS variables

:root {
  --industrial-steel-gaze-1: #303030;
  --industrial-steel-gaze-2: #5A5A5A;
  --industrial-steel-gaze-3: #8F8F8F;
  --industrial-steel-gaze-4: #C0C0C0;
  --industrial-steel-gaze-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-steel-gaze": {
        1: "#303030",
        2: "#5A5A5A",
        3: "#8F8F8F",
        4: "#C0C0C0",
        5: "#DCDCDC",
      }
    }
  }
}

Hex values

Color 1#303030

Color 2#5A5A5A

Color 3#8F8F8F

Color 4#C0C0C0

Color 5#DCDCDC

Accessibility

Contrast checker

1.9:1Fail

4.1:1AA18

7.3:1AAA

9.6:1AAA

1.9:1Fail

2.1:1Fail

3.8:1AA18

5:1AA

4.1:1AA18

2.1:1Fail

1.8:1Fail

2.4:1Fail

7.3:1AAA

3.8:1AA18

1.8:1Fail

1.3:1Fail

9.6:1AAA

5:1AA

2.4:1Fail

1.3:1Fail

Similar palettes

More like Industrial Steel Gaze