Palette

Industrial Steel Echo

A robust selection of deep grays and silver tones, mirroring the raw strength of steel and concrete.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A1A#36454F#708090#D3D3D3#A9A9A9

Palette guide

How to use Industrial Steel Echo

Overview

The Industrial Steel Echo palette offers a robust selection of deep grays and silver tones, mirroring the raw strength of steel and concrete. Featuring a foundational dark charcoal like #1A1A1A, a solid medium gray #36454F, and a bright silver #D3D3D3, this collection is ideal for designers and developers crafting powerful, minimalist, or technical aesthetics. Its strong, monochromatic nature provides excellent depth and a serious, no-nonsense mood, perfect for structured interfaces and bold branding. Utilize these shades to evoke durability and modern efficiency in your projects, ensuring a cohesive and strong visual identity.

Best used for

Industrial branding and identity
Tech product interfaces and dashboards
Architectural visualization and renders
Automotive design presentations
Modern art gallery websites
Heavy machinery or construction company sites

Suggested color roles

primary

#36454F serves as a foundational color for large blocks, main navigation, or primary UI elements, offering a sturdy base.

secondary

#708090 provides a reliable supporting role for secondary information, borders, or subtle background variations.

accent

#D3D3D3 is excellent for highlights, interactive states, icons, or subtle metallic sheen, drawing attention without overwhelming.

background

#1A1A1A creates a sophisticated, dark backdrop, providing depth and allowing lighter elements to pop effectively.

text

#A9A9A9 is suitable for readable body text on darker backgrounds like #1A1A1A or #36454F, or use pure white for maximum contrast.

Accessibility notes

Ensure #D3D3D3 or #A9A9A9 has sufficient contrast against #1A1A1A or #36454F for body text (WCAG AA).
Avoid using #708090 text on #A9A9A9 backgrounds due to insufficient contrast for readability.
For critical text on dark backgrounds, consider using pure white for optimal legibility.
Verify all text and background color pairings with a contrast checker to meet accessibility standards.

Recommended combinations

Dark Base UI

For dark mode interfaces, with #1A1A1A as background, #36454F for cards, and #A9A9A9 for text.

#1A1A1A · #36454F · #A9A9A9

Metallic Layers

Ideal for creating layered metallic effects or subtle depth in graphical elements.

#36454F · #708090 · #D3D3D3

Highlight Contrast

Use #1A1A1A as a deep background, #708090 for elements, and #D3D3D3 for bright, crisp highlights.

#1A1A1A · #708090 · #D3D3D3

CSS variables

:root {
  --industrial-steel-echo-1: #1A1A1A;
  --industrial-steel-echo-2: #36454F;
  --industrial-steel-echo-3: #708090;
  --industrial-steel-echo-4: #D3D3D3;
  --industrial-steel-echo-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-steel-echo": {
        1: "#1A1A1A",
        2: "#36454F",
        3: "#708090",
        4: "#D3D3D3",
        5: "#A9A9A9",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#36454F

Color 3#708090

Color 4#D3D3D3

Color 5#A9A9A9

Accessibility

Contrast checker

1.8:1Fail

4.3:1AA18

11.6:1AAA

7.4:1AAA

1.8:1Fail

2.4:1Fail

6.6:1AA

4.2:1AA18

4.3:1AA18

2.4:1Fail

2.7:1Fail

1.7:1Fail

11.6:1AAA

6.6:1AA

2.7:1Fail

1.6:1Fail

7.4:1AAA

4.2:1AA18

1.7:1Fail

1.6:1Fail

Similar palettes

More like Industrial Steel Echo

View all monochrome

Industrial Grunge Edge