Why HSL Is No Longer Enough?

HSL was convenient, but it has a huge drawback: it doesn't account for how human eye perceives brightness. For example, for HSL, yellow and blue have same " brightness " 50%, but to our eye yellow looks much brighter. OKLCH fixes this.

OKLCH Structure:

1. L (Lightness): Perceived brightness (0% - 100%).
2. C (Chroma): Saturation (how " pure " the color is).
3. H (Hue): Shade (0 - 360).

.button {
  background: oklch(70% 0.2 150); /* Gentle green */
}

Advantages:

• Predictability: If you change only H (shade), visual brightness of color remains unchanged. This is perfect for creating palettes.
• Wide Gamut: Supports ultra-vibrant colors on modern P3 screens (iPhone, MacBook).