OKLCH Color Palettes

What are OKLCH Colors?

OKLCH colors are defined in a perceptually uniform color space that separates lightness (L), chroma (C), and hue (H). Unlike HSL, where 50% lightness looks completely different for yellow versus blue, OKLCH guarantees that equal lightness values look equally bright across all hues. This makes OKLCH ideal for building accessible, predictable color systems.

How the 11-Step 50-950 Scale Works

Each palette is an 11-step scale from step 50 (lightest, near-white) to step 950 (darkest, near-black). The steps follow a perceptually uniform lightness curve: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. Step 500 is the base color. Chroma is automatically tapered at extreme light and dark steps to keep every shade gamut-safe and visually clean.

This is the same scale used by Tailwind CSS v4's default palette and by Radix Colors. It gives you a complete set of tints and shades for any UI role — backgrounds, borders, text, and interactive states.

How to Use a Palette in Tailwind CSS v4

Open any palette page and copy the Tailwind v4 @theme snippet. Paste it into your global CSS file:

          @import "tailwindcss";

@theme {
  --color-brand-50: oklch(0.965 0.015 265);
  --color-brand-100: oklch(0.935 0.028 265);
  /* ... all 11 steps ... */
  --color-brand-950: oklch(0.22 0.06 265);
}

Tailwind v4 automatically generates utilities for every step: bg-brand-50, text-brand-500, border-brand-200, and so on.