TAILWIND v4 + OKLCH

Generate a production-ready Tailwind color scale

Start with one brand color and generate perceptually ordered 50–950 primitives using modern OKLCH values.

Base color

Token name

Tailwind v4 theme variables

@theme {
  --color-brand-50: oklch(97.0% 0.060 259.8);
  --color-brand-100: oklch(93.0% 0.094 259.8);
  --color-brand-200: oklch(86.0% 0.188 259.8);
  --color-brand-300: oklch(77.0% 0.188 259.8);
  --color-brand-400: oklch(68.0% 0.188 259.8);
  --color-brand-500: oklch(62.3% 0.188 259.8);
  --color-brand-600: oklch(52.0% 0.188 259.8);
  --color-brand-700: oklch(43.0% 0.188 259.8);
  --color-brand-800: oklch(34.0% 0.188 259.8);
  --color-brand-900: oklch(27.0% 0.188 259.8);
  --color-brand-950: oklch(19.0% 0.103 259.8);
}

Suggested semantic roles

Subtle surfacebrand-50

Borderbrand-200

Primary actionbrand-600

Hoverbrand-700

Strong textbrand-900

Why generate Tailwind colors in OKLCH?

OKLCH gives the scale direct control over perceptual lightness. That makes the steps feel more consistent than evenly mixing sRGB values. This generator also reduces chroma near the lightest and darkest ends to produce calmer surfaces and deep shades.

A numeric scale is only the primitive layer. Map it to semantic names such as primary, surface, text, border, focus, and destructive inside your application.

Read the Tailwind color guide →