Beginner LevelCSS & Modern Layouts
What CSS color formats exist and why is oklch() recommended in 2026?
❓ Interview Prompt: Compare hex, rgb(), hsl(), and the modern oklch() color format for perceptual uniformity.
CSS supports multiple color notation systems:
1
Hex (
#3d2c2e): 6-digit hexadecimal notation. Compact but not human-readable for color adjustments.2
`rgb(61, 44, 46)`: Red, Green, Blue channels (0-255). Intuitive for additive color mixing.
3
`hsl(355, 16%, 21%)`: Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Easier to create color variations by adjusting lightness.
4
`oklch(35% 0.05 10)` (2026 standard): Lightness, Chroma, Hue in a perceptually uniform color space. Colors with the same lightness value actually appear equally bright to human vision, unlike HSL where
hsl(60, 100%, 50%) (yellow) appears far brighter than hsl(240, 100%, 50%) (blue).Code Implementation Example
css
:root {
/* Traditional approach */
--primary: #3d2c2e;
--bg: hsl(340, 20%, 94%);
/* Modern oklch() with consistent perceived brightness */
--accent: oklch(55% 0.12 30);
--accent-hover: oklch(45% 0.14 30); /* Just darken lightness */
--accent-light: oklch(92% 0.03 30); /* Light tint */
}💡oklch() color palette with perceptually uniform lightness adjustments.
🎯 Interview Key Takeaway
oklch() produces perceptually uniform colors: adjusting the lightness value changes brightness predictably across all hues.
#Colors#oklch#Design#Beginner
Back to all CSS & Modern Layouts Questions→