Building a color palette with OKLCH

A palette as math

:root {
  /* Blue ramp — same hue (252), same chroma (0.18), varying lightness */
  --blue-50:  oklch(0.95 0.04 252);
  --blue-100: oklch(0.90 0.06 252);
  --blue-200: oklch(0.82 0.10 252);
  --blue-400: oklch(0.66 0.18 252);
  --blue-500: oklch(0.55 0.18 252);
  --blue-700: oklch(0.40 0.15 252);
  --blue-900: oklch(0.25 0.10 252);
}

Pick a hue (252 = blue). Pick a chroma curve (high in the middle, lower at the extremes — pure light/dark colors should desaturate). Walk lightness 0.10-0.95 in steps.

The result: 7 blues that look like a real palette, not 7 random colors.

Why OKLCH wins for palettes

In HSL with constant saturation = 80%, the "yellow at L=50%" is dramatically brighter than "blue at L=50%." Your palette looks lumpy.

In OKLCH with constant lightness = 0.55, "yellow" and "blue" have the same perceived brightness. Your palette feels consistent.

Tailwind 4 uses OKLCH

Tailwind's 2024 colors are all defined in OKLCH internally. Their palette consistency comes from this exact technique.

Pick once, reuse forever

Define every color as a custom property at :root. NEVER write a raw color in a component:

/* DON'T */
.button { background: #3B82F6; }

/* DO */
.button { background: var(--blue-400); }

Now a redesign = swap the palette at :root. Every component updates.