OKLCH vs HSL: which should you use in CSS?
Both show up in modern stylesheets. One is familiar; one tracks perception better. Here is how to choose without a holy war in Slack.
HSL is the old comfortable shoe: hue, saturation, lightness, done. OKLCH is the newer pair that actually matches how many people notice brightness. You do not have to pick one religion — but you should know what each is good at before you rebuild every token.
Where HSL still wins
Quick tweaks, legacy codebases, and “spin the hue wheel” exploration. Designers understand it. Every tutorial still uses it. If you are prototyping in DevTools and nudging one slider, HSL is fine.
Where OKLCH earns its keep
Building ramps (50–950), theming across light and dark, and keeping yellow from turning into mustard when you lighten it. OKLCH separates colorfulness (chroma) from gray in a way HSL pretends to but does not always deliver. Our color converter shows the same swatch side by side — paste a brand hex and compare the numbers.
Author in OKLCH, export HEX for Android and older pipelines. The CSS variables generator can emit HEX with OKLCH comments so intent survives hand edits.
Browser reality
oklch() is widely available in current browsers; fallbacks still matter for email and some embedded WebViews. Pair modern values with a HEX fallback or use @supports when the audience is mixed.
Read our longer why OKLCH for UI systems piece if you are selling the change internally — this note is just the decision tree.