CSSoklch là perceptually uniform — khi giữ nguyên lightness và chroma mà chỉ thay đổi hue, mắt người cảm nhận độ sáng như nhau. hsl không đảm bảo điều này (vàng trông sáng hơn xanh dương cùng lightness).
Điều này cực kỳ quan trọng cho design systems: primary/secondary/error colors có perceived brightness đồng đều, UI nhất quán.
Ngoài ra, oklch hỗ trợ gamut rộng hơn sRGB (P3 displays) — màu sắc sống động hơn trên màn hình hiện đại.
oklch (lightness, chroma, hue) is superior to hsl because it is perceptually uniform — when you keep lightness and chroma the same and only change hue, the perceived brightness remains consistent (hsl doesn't guarantee this: e.g., yellow hsl appears brighter than blue at the same lightness value).
- This is critical when building color palettes for design systems: primary, secondary, and error colors all have equal perceived brightness, making the UI visually consistent and easy to read.
- Additionally, oklch supports a wider gamut than sRGB (supports P3 displays), enabling more vivid colors on modern screens.