Q33: Why are modern CSS color spaces like oklch() preferred over rgb() and hex?
Modern CSS color functions like oklch(L C H) operate in perceptually uniform color spaces. Unlike rgb() or hex, oklch() provides consistent visual brightness across hues, wider color gamut coverage (P3 display profiles), and simplified automated palette generation.
Declaring oklch Color Values
:root {
/* oklch(Lightness, Chroma, Hue) */
--brand-primary: oklch(0.6 0.25 250);
--brand-light: oklch(0.9 0.05 250);
}💡 oklch provides predictable, perceptually uniform brightness adjustments across color palettes.
Key Takeaways
- Perceptually uniform: changing hue preserves consistent visual brightness.
- Supports wide-gamut P3 display colors on modern device screens.
Knowledge Check
What primary operational advantage does the oklch() color space offer over traditional rgb() colors?