HEX vs RGB vs HSL vs LCH vs OKLCH vs LAB - Which to Use?

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.