styleColor Scheme

Industrial Metal

A rugged industrial palette with steel grays and metallic tones. Captures the raw beauty of exposed brick and iron structures.

#111827
#18181b
#ffffff
#94a3b8
#f97316

Color Breakdown

Role

background

Name

Gray 900

Hex

#111827

Tailwind

bg-gray-900

Role

surface

Name

Zinc 900

Hex

#18181b

Tailwind

bg-zinc-900

Role

primary

Name

White

Hex

#ffffff

Tailwind

text-white

Role

secondary

Name

Slate 400

Hex

#94a3b8

Tailwind

text-slate-400

Role

accent

Name

Orange 500

Hex

#f97316

Tailwind

bg-orange-500

Live Preview

Welcome Back

This is a live preview of the Industrial Metal color scheme applied to a sample card component. See how the colors work together in a realistic UI context.

Design Rationale

Dark grays and metallic silver tones replicate steel, iron, and concrete surfaces. Orange accents recall sparks from welding and industrial warning signals.

Use Cases

Architecture firmsConstruction companiesLoft conversion sites

CSS Variables

CSS
:root {
  --background: #111827;
  --surface: #18181b;
  --primary: #ffffff;
  --secondary: #94a3b8;
  --accent: #f97316;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'industrial-metal': {
  'background': '#111827',  // bg-gray-900
  'surface': '#18181b',  // bg-zinc-900
  'primary': '#ffffff',  // text-white
  'secondary': '#94a3b8',  // text-slate-400
  'accent': '#f97316',  // bg-orange-500
        },
      },
    },
  },
};

Related Color Schemes

Build with This Scheme

Use our palette generator to customize and extend this color scheme for your project.

Open Palette Generator

Frequently Asked Questions

How do industrial palettes create atmosphere?
Combining dark grays with metallic accents and warm orange creates the raw, utilitarian feel of warehouses and workshops.