industryColor Scheme

Automotive Bold

A bold automotive palette with powerful darks and metallic red accents. Conveys speed, precision, and engineering excellence.

#111827
#fafafa
#dc2626
#94a3b8
#fcd34d

Color Breakdown

Role

background

Name

Gray 900

Hex

#111827

Tailwind

bg-gray-900

Role

surface

Name

Zinc 50

Hex

#fafafa

Tailwind

bg-zinc-50

Role

primary

Name

Red 600

Hex

#dc2626

Tailwind

text-red-600

Role

secondary

Name

Slate 400

Hex

#94a3b8

Tailwind

text-slate-400

Role

accent

Name

Amber 300

Hex

#fcd34d

Tailwind

bg-amber-300

Live Preview

Welcome Back

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

Design Rationale

Dark backgrounds with red evoke power, speed, and automotive passion. Amber highlights recall headlights and instrument panel illumination.

Use Cases

Car manufacturer sitesAuto dealershipsMotorsport platforms

CSS Variables

CSS
:root {
  --background: #111827;
  --surface: #fafafa;
  --primary: #dc2626;
  --secondary: #94a3b8;
  --accent: #fcd34d;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'automotive-bold': {
  'background': '#111827',  // bg-gray-900
  'surface': '#fafafa',  // bg-zinc-50
  'primary': '#dc2626',  // text-red-600
  'secondary': '#94a3b8',  // text-slate-400
  'accent': '#fcd34d',  // bg-amber-300
        },
      },
    },
  },
};

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

What colors represent automotive power?
Red and black combinations are iconic in automotive branding, representing speed, power, and precision engineering.