Tailwind Colors

How to use Tailwind colors

Every Tailwind color is exposed as utility classes named {color}-{shade}. Prefix them by property: bg-blue-500 for a background, text-blue-600 for text, border-blue-200 for a border, or ring-blue-500 for a focus ring.

The shade scale runs 50 (lightest) to 950 (darkest). As a rule of thumb: 50–100 for tinted backgrounds, 200–300 for borders, 500–600 for solid fills and buttons, and 700–950 for text and dark surfaces.

Tailwind v4 colors & OKLCH

Tailwind CSS v4 defines its default palette in OKLCH instead of hex/RGB. OKLCH is a perceptually-uniform color space, so the shade steps look evenly spaced to the eye and colors can reach the wider P3 gamut on modern displays. Each value here is Tailwind's own OKLCH, e.g. --color-blue-500: oklch(62.3% 0.214 259.815).

The hex values are the sRGB fallbacks for older browsers — #3b82f6 for blue-500 — so whichever format you copy renders the same color as the Tailwind class.

Custom colors in Tailwind

To add your own custom colors in Tailwind v4, define them in CSS with the @theme directive:

@theme {
  --color-brand-500: oklch(0.62 0.19 145);
  --color-brand-600: oklch(0.55 0.19 145);
}

In Tailwind v3, add them under theme.extend.colors in tailwind.config.js. Either way, Tailwind generates the matching bg-, text- and border- utilities.

Tailwind colors vs shadcn colors

These are the raw Tailwind color scales. shadcn/ui sits one layer up: it maps a base color and an accent onto semantic tokens like --background, --primary and --muted. Use this palette to pick the raw colors; use the theme generator to turn them into shadcn tokens.