RGB vs HSL vs OKLCH: which color format should you use?
They all describe the same pixels, but how they describe them changes what you can do. RGB is how screens work, HSL is how humans talk about color, and OKLCH is how you keep lightness consistent across a palette.
RGB — how the screen thinks
RGB mixes red, green and blue light, each from 0–255. rgb(124, 92, 255) is the violet you see across this site. It maps directly to hardware, which is why #RRGGBB hex is just RGB in base-16.
The catch: RGB is great for machines and terrible for humans. Want this violet but 10% lighter? There is no obvious number to change — you have to nudge all three channels together. Try it in the HEX ↔ RGB ↔ HSL converter.
HSL — how designers talk
HSL splits color into hue (0–360° around the wheel), saturation (0–100%) and lightness (0–100%). Now "10% lighter" is just l + 10. That is why every palette and tint tool here works in HSL under the hood.
hsl(60 100% 50%) (yellow) looks far lighter than hsl(240 100% 50%) (blue), even though both say 50%.OKLCH — perceptually even lightness
OKLCH is built on the OKLab perceptual model. Its L (lightness), C (chroma) and H (hue) are tuned so that equal L values *look* equally bright across every hue. That makes it the right tool for generating an accessible color scale where 500 → 600 feels like the same step at every hue.
Modern browsers support oklch() directly. Pick any color in the Color Picker to see its OKLCH value, or generate a perceptually-even scale in the CSS Variables Generator.
Frequently asked questions
Is OKLCH better than HSL?
For building consistent palettes and scales, yes — its lightness is perceptually even, so steps look uniform across hues. For quick one-off tweaks, HSL is simpler and universally supported.
Do all browsers support oklch()?
All current versions of Chrome, Edge, Safari and Firefox support oklch(). For older browsers, ship a hex or rgb fallback before the oklch() declaration.
What is the difference between HSL and HSV?
Both use hue and saturation, but HSL’s third axis is lightness (50% = pure color) while HSV’s is value/brightness (100% = pure color). HSL is more common in CSS; HSV appears in many color pickers.