Tailwind CSS v4 OKLCH vs Hex: Why Modern Web Design Is Moving Beyond sRGB
Understand why Tailwind CSS v4 migrated its default palette to the OKLCH color space. Learn how perceptual uniformity eliminates muddy gradients.
Tailwind CSS v4 migrated its core color palette from Hex/sRGB to OKLCH. Unlike legacy Hex or HSL, OKLCH is perceptually uniform: colors with the same lightness value appear equally bright to the human eye, eliminating muddy gray midpoints in gradients and providing access to vibrant P3 wide-gamut displays.
Solve this problem now with our free Color Palette Generator
Try it instantly in your browser — zero tracking, 100% client-side privacy.
Specification & Architecture Reference
| Feature | Legacy Hex / sRGB (#3b82f6) | Modern OKLCH (oklch(0.62 0.21 259)) |
|---|---|---|
| Perceptual Uniformity | ❌ Distorted (Yellow appears much brighter than blue at same value) | ✅ Perfectly uniform lightness across all hues |
| Display Gamut Support | Limited to ~35% of visible spectrum (sRGB) | Full P3 wide-gamut support on Apple/OLED screens (+25% colors) |
| Gradient Transitions | Often creates a muddy gray or washed-out midpoint | Smooth, vivid transitions through perceptual color space |
| Browser Support | 100% universal | 93%+ across all modern evergreen browsers (CSS Color 4) |
The Fundamental Flaw of Hex and HSL
For over thirty years, the web relied on the **sRGB** color model and Hexadecimal codes (`#3b82f6`). Later, **HSL (Hue, Saturation, Lightness)** became popular for design systems.
However, HSL has a significant mathematical limitation: **it is not perceptually uniform**. - An HSL color with Lightness = 50% in yellow (`hsl(60, 100%, 50%)`) appears blindingly bright. - An HSL color with Lightness = 50% in blue (`hsl(240, 100%, 50%)`) appears dark and muted.
If you generate a color palette by rotating hue angles in HSL, your contrast ratios will swing wildly, breaking design system accessibility.
The OKLCH Advantage Introduced in the **W3C CSS Color Module Level 4**, **OKLCH** separates color into three distinct perceptual dimensions: 1. **L (Perceptual Lightness):** `0` (black) to `1` (white). Lightness 0.70 has the identical perceived brightness regardless of whether the hue is green, blue, or violet. 2. **C (Chroma):** Saturation/purity of the color, from `0` (grayscale) upward. 3. **H (Hue):** The angle on the color circle from `0` to `360`.
/* Tailwind CSS v4 Color Definition */
:root {
--color-primary-500: oklch(0.623 0.214 259.815);
--color-primary-600: oklch(0.546 0.245 262.881);
}Access to P3 Wide Gamuts Modern smartphone and laptop screens (MacBooks, iPhones, OLED monitors) support the **Display P3** color gamut, displaying approximately 25% more vivid colors than standard sRGB monitors. OKLCH accesses these vibrant shades natively without clipping.
Generate palettes with both OKLCH and Hex exports using Mickytool's **Color Palette Generator**.
Solve this problem now with our free Color Palette Generator
Execute this workflow immediately without saving data on remote servers.
Frequently Asked Questions
Can I use OKLCH in older browsers like Internet Explorer?
Legacy browsers do not support OKLCH. For older clients, PostCSS plugins can transpile OKLCH definitions to fallback sRGB Hex values.
Why does Tailwind v4 no longer use tailwind.config.js for colors?
Tailwind v4 is CSS-first. Palettes are configured directly in your CSS stylesheet using @theme directives and native CSS custom properties.