OKLCH Colors in Tailwind v4: Why Perceptual Color Matters
HSL and hex are broken for design systems. Here's why oklch — the color space Tailwind v4 and Ninna UI adopted — produces better, more accessible palettes.
By Ninna UI Team
If you've ever generated a color palette with HSL and noticed that your '50% lightness' blue looks much brighter than your '50% lightness' yellow, you've hit the fundamental problem: HSL lightness is not perceptually uniform. oklch fixes this.
What is oklch?
oklch stands for OK Lab Chroma Hue. It's a perceptual color space where equal numeric changes produce equal visual changes. The three channels are: L (lightness, 0-1), C (chroma/saturation, 0-0.4+), and H (hue angle, 0-360).
/* Perceptually even steps in oklch */
--primary-300: oklch(0.75 0.18 280);
--primary-400: oklch(0.68 0.19 280);
--primary-500: oklch(0.62 0.20 280);
--primary-600: oklch(0.55 0.22 280);
--primary-700: oklch(0.48 0.20 280);Each step looks like an equal visual change — something HSL cannot achieve because its lightness channel is based on RGB values, not human perception.
Why this matters for design systems
- Consistent scales: A 500-to-600 step looks the same regardless of hue.
- Better contrast: WCAG contrast calculations are more predictable in perceptual space.
- Easier theming: Generate a palette by picking a hue and stepping lightness — the results are automatically balanced.
- Dark mode: Inverting lightness values produces perceptually correct dark mode colors.
How Tailwind v4 uses oklch
Tailwind CSS v4 adopted oklch as its default color space. The @theme directive lets you define colors in oklch and Tailwind generates the full utility scale. Ninna UI's 5 theme presets all use oklch custom properties:
@import "@ninna-ui/core/theme/presets/default.css";
/* The preset defines: */
:root {
--color-primary: oklch(0.55 0.22 280);
--color-primary-content: oklch(0.98 0.01 280);
/* ...8 semantic colors, each with content pair */
}Browser support
oklch is supported in all modern browsers as of 2024. Chrome 111+, Firefox 113+, Safari 15.4+. If you need to support older browsers, Tailwind v4 can fall back to rgb() via @supports queries, but for 2026 projects, oklch is safe to use directly.
The takeaway
oklch produces better palettes with less effort. If you're building a design system in 2026, it's the right color space — and with Tailwind v4 and Ninna UI, it's already set up for you.