Industrial Metal
A rugged industrial palette with steel grays and metallic tones. Captures the raw beauty of exposed brick and iron structures.
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
CSS Variables
:root {
--background: #111827;
--surface: #18181b;
--primary: #ffffff;
--secondary: #94a3b8;
--accent: #f97316;
}Tailwind Config
// 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
Minimalist Light
A clean minimalist palette with abundant white space and subtle gray accents. Less is more with this restrained, elegant approach.
Minimalist Dark
A dark minimalist palette with refined grays and subtle accent color. Achieves elegance through restraint on a dark canvas.
Brutalist Raw
A raw brutalist palette with stark black-and-white contrast and no softening. Embraces imperfection and confrontational design.
Brutalist Colorful
A colorful brutalist palette that clashes bold hues intentionally. Breaks design rules with unapologetic vibrancy and contrast.
Retro 80s
A neon-tinged 80s retro palette with hot pink and electric blue. Channels the vibrant excess and synthwave aesthetic of the 1980s.
Retro 70s
A warm 70s retro palette with burnt orange and earthy browns. Evokes the groovy, laid-back vibe of the 1970s.
Build with This Scheme
Use our palette generator to customize and extend this color scheme for your project.
Open Palette Generator