HEX vs RGB vs HSL vs LCH vs OKLCH vs LAB - Which to Use?
Six color models, six trade-offs. A practical guide for designers and developers picking the right format for design tokens, gradients, and accessibility.
HEX
#ffffff means white. HEX is just RGB written in hexadecimal - three pairs for red, green, and blue, each 0–255. It is compact, copy-pasteable, and ubiquitous in CSS, but it tells you nothing about how the color will look next to other colors.
RGB
rgb(255, 0, 0) is the additive model your screen actually uses. Great for hardware, terrible for humans - going from rgb(255,0,0) to rgb(0,0,255) linearly does not feel like an even transition.
HSL
HSL gives you Hue, Saturation, and Lightness - much closer to how we describe color in conversation. It is excellent for quick tints and shades, but its "lightness" is not perceptual: HSL yellow at L=50% looks much brighter than HSL blue at L=50%.
LCH and LAB
CIE LAB is a perceptually uniform color space designed by humans, for humans. LCH is simply LAB expressed in polar coordinates (Lightness, Chroma, Hue). Two colors with the same LCH lightness will look equally bright. Perfect for accessible design systems.
OKLCH
OKLCH is Björn Ottosson's modern improvement over LCH - better hue uniformity, better gradient interpolation, and now natively supported in CSS. If you are designing a 2025 design system, generate your scales in OKLCH.
Quick decision guide
- Storing a single color in a database? HEX.
- CSS variables for an accessible design system? OKLCH.
- Need to programmatically tweak saturation? HSL or OKLCH.
- Print or scientific work? LAB / LCH.
Convert between every model instantly in our Color Converter.