OKLCH vs HSL in Tailwind CSS v4 — UI Color Scale Guide — Interactive Studio & Export
Learn why Tailwind CSS v4 switched from RGB/HSL to OKLCH color tokens, how perceptual lightness keeps buttons readable across hues, and copy ready-to-use @theme scales.
Active Color Swatches & Shades
- #0066FF — HEX, RGB, HSL & Shade Scale
- #FF2E63 — HEX, RGB, HSL & Shade Scale
- #F59E0B — HEX, RGB, HSL & Shade Scale
- #10B981 — HEX, RGB, HSL & Shade Scale
- #06B6D4 — HEX, RGB, HSL & Shade Scale