Manipulate hue, lightness, and saturation/chroma. Each color system changes only the property you touch — everything else stays fixed. Watch how the same adjustment produces different results.
Built on RGB
hsl(150 70% 50%)Lightness is a mathematical transformation of RGB — not perceptually uniform. L=50% at different hues produces visibly different brightness. Saturation can clip unpredictably.
Built on LAB
lch(50% 105.0 150)Perceptually uniform lightness based on CIE LAB. Same L value = similar perceived brightness across hues. Chroma measures colorfulness independently from lightness.
Built on OKLAB
oklch(50% 0.2800 150)Improved perceptual uniformity over LCH. Fixes hue shifts in blue/purple regions. Most consistent perceived lightness and chroma across the full hue range.
HSL is a human-friendly representation of RGB. It gives you intuitive controls (hue, saturation, lightness) but inherits RGB's perceptual non-uniformity. "50% lightness" means different things for different hues.
LAB is a perceptual color space designed so equal numerical distances correspond to equal perceived differences. LCH re-expresses LAB in cylindrical coordinates — Lightness, Chroma (colorfulness), and Hue — making it practical to manipulate directly.
OKLAB improves on LAB with better perceptual uniformity, especially in blue and purple regions where LAB struggles. OKLCH is its cylindrical form. It provides the most consistent behavior when adjusting lightness and chroma across different hues.
Set lightness to 50% and saturation high. Sweep hue from yellow (60°) to blue (240°). In HSL, perceived brightness changes dramatically. In OKLCH, it stays visually consistent.
Look at the hue range strips. HSL's hue gradient has uneven brightness — some hues look lighter, some darker. The OKLCH hue gradient maintains more uniform brightness throughout.
With a blue hue (~240°), increase saturation. HSL reaches full saturation quickly and clips. LCH and OKLCH chroma provides finer control over colorfulness without abrupt clipping.
Compare lightness range strips. HSL passes through unexpected colors mid-range. LCH and OKLCH transition smoothly from dark to light with consistent hue and chroma.