Why Oklch beats HSL for color variations

WHAT THIS TESTS: This probes whether you know that HSL is a simple transform of sRGB and is not perceptually uniform, while Oklch is built around human perception, which matters for systematic color scales.

A GOOD ANSWER COVERS: HSL defines lightness mathematically from RGB, so two colors with the same L value can look dramatically different in brightness; a yellow at 50% lightness appears far brighter than a blue at 50%. That makes generating a hover or active shade by nudging lightness inconsistent across your palette, and it can silently break contrast ratios. Oklch is a perceptual color space where the L axis tracks perceived lightness and C is chroma, so a uniform lightness step looks like a uniform step regardless of hue. This gives predictable, evenly spaced tints and shades, hover states with consistent contrast, and palettes that hold up across many hues. Oklch also reaches colors outside the sRGB gamut on wide-gamut displays.

COMMON WRONG ANSWERS: Claiming HSL is already perceptually uniform, so the spaces are interchangeable. Thinking the only benefit is nicer syntax. Ignoring that lightness shifts in HSL can drop or raise contrast unevenly and fail accessibility checks.

LIKELY FOLLOW-UPS: How does color-mix() let you blend two colors in a chosen space, and why does mixing in Oklch look better than in sRGB. What is the difference between Oklch and Oklab. How do you handle gamut clamping for colors outside sRGB.

ONE CONCRETE EXAMPLE: Define --accent: oklch(60% 0.15 250). For a hover state, lower lightness slightly with oklch(52% 0.15 250); the perceived darkening is consistent whether the base hue is blue, red, or green, whereas doing the same with HSL lightness would darken some hues far more than others.