The Color System

Tailwind v4 ships a wide-gamut OKLCH palette; extend it with your own brand colors using the @theme directive.

4 min read Level 2/5 #tailwind#color

What you'll learn

Understand the 50 to 950 shade scale
Know why v4 uses OKLCH for color
Add brand colors via @theme

Every color utility in Tailwind draws from one shared palette. Understanding its structure is what makes the whole system feel consistent.

The Shade Scale

Each color has eleven steps, from 50 (lightest) to 950 (darkest):

<div class="bg-blue-50">subtle tint</div>
<div class="bg-blue-500">the workhorse mid-tone</div>
<div class="bg-blue-900 text-blue-50">deep, high-contrast</div>

A rough rule: 50–200 for backgrounds, 400–600 for accents and controls, 700–950 for text and emphasis.

Why OKLCH

Tailwind v4 defines its palette in the OKLCH color space rather than hex/sRGB. This matters for two reasons:

Wider gamut — on modern P3 displays the colors are noticeably more vivid because they are not clamped to sRGB.
Perceptual uniformity — equal numeric steps look like equal visual steps, so a 500 reads as “the same brightness” across every hue.

Extending the Palette

Because v4 is CSS-first, a new color is just a theme variable. Define one shade or a full ramp:

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.62 0.19 256);
  --color-brand-700: oklch(0.48 0.17 256);
}

That single declaration automatically enables bg-brand-500, text-brand-500, border-brand-700, opacity modifiers, hover variants — everything, with no JS config file.

Background Color & Images →