HSLuv Color Editor
Edit colors in HSLuv space — perceptually uniform alternative to HSL.
Overview
The HSLuv Color Editor lets you edit colours in HSLuv space, a perceptually-uniform alternative to HSL where every input value of L* corresponds to the same perceived lightness regardless of hue. Tweak hue, saturation and lightness with sliders and watch the hex output update — every change feels predictable, with none of the lightness drift that plagues classic HSL.
It targets designers building tonal scales by hand, developers parameterising chart palettes, and anyone who wants HSL-like ergonomics with perceptually correct results. HSLuv is especially helpful when iterating on a single hue across many lightness stops.
How it works
HSLuv is built on the CIELUV colour space. Saturation in HSLuv is a percentage of the maximum chroma reachable at the current hue and lightness — so 100% always means "as saturated as sRGB allows for this combination", and the value automatically clamps as you move toward the lightness extremes.
Lightness in HSLuv is the CIE Lab L* value (0–100), which means a HSLuv-50 yellow and a HSLuv-50 blue look genuinely equal in lightness. Conversion to sRGB goes via CIE LCHuv → CIELUV → CIE XYZ → sRGB, with gamma encoding applied at the end.
Examples
H 220, S 80, L 50 → #2c83d2
H 60, S 80, L 80 → #d8c46f
H 320, S 100, L 60 → #df6bb4
H 0, S 0, L 50 → #777777 (grey at any hue)
FAQ
How is HSLuv different from HSL?
HSL is defined directly in gamma-encoded sRGB, so its lightness axis is not perceptually uniform — a yellow at L 50 looks far brighter than a blue at L 50. HSLuv builds on CIELUV, fixing both lightness and the meaning of saturation.
Is HSLuv the same as OKLCH?
They share goals but differ in the underlying colour space — HSLuv uses CIELUV while OKLCH uses OKLab. OKLab is newer and slightly better for screen colours, so OKLCH has overtaken HSLuv in most browser-side use cases.
Why does 100% saturation give different hexes at different lightnesses?
The maximum chroma reachable in sRGB depends on hue and lightness. HSLuv normalises so that "100% saturation" always means "as far from grey as sRGB allows here", which produces in-gamut results everywhere.
Should I use HSLuv in CSS?
CSS does not have a native hsluv() function. Convert HSLuv values to hex or oklch() before pasting them into a stylesheet.