moodColor Scheme

Powerful Strong

A powerful palette with commanding darks and intense red accents. Communicates strength, determination, and unwavering resolve.

#111827
#18181b
#ffffff
#94a3b8
#dc2626

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

Red 600

Hex

#dc2626

Tailwind

bg-red-600

Live Preview

Welcome Back

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

Design Rationale

Dark backgrounds with white text create a no-nonsense, powerful foundation. Red accents demand attention like warning signals, adding controlled intensity.

Use Cases

MMA promotion sitesMilitary-style brandsIntense product launches

CSS Variables

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

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'powerful-strong': {
  'background': '#111827',  // bg-gray-900
  'surface': '#18181b',  // bg-zinc-900
  'primary': '#ffffff',  // text-white
  'secondary': '#94a3b8',  // text-slate-400
  'accent': '#dc2626',  // bg-red-600
        },
      },
    },
  },
};

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 dark and red palettes convey power?
Black represents authority and finality while red triggers alertness and intensity, together creating an unmistakably powerful statement.