HSLuv vs. HSL

	HSL	CIELUV LCh	HSLuv	HPLuv
Lightness	Relative	Absolute	Absolute	Absolute
Saturation^*	Relative	Absolute	Relative	Absolute
Saturation range	Percent	Undefined	Percent	Percent
Saturated colors	Yes	Yes	Yes	No
Hue uniformity	Poor	Good	Good	Good
^* Saturation and chroma are distinct concepts

Overview

The dips in the graph represent impossible colors (such as dark saturated yellow). CIELUV LCh doesn't warn you about them, making it unsuitable for generating colors.

HSLuv preserves the lightness and hue components of CIELUV LCh and stretches its chroma so that every color has the same range, defined as a percentage.

HPLuv takes as many colors as it can from CIELUV LCh without distorting the chroma. As you can see, the resulting color space is smooth, but only pastel colors can be included.

Chroma

The chroma component of CIELUV LCh is absolute. Unlike HSL's saturation you can effectively use it to compare two different colors.

Both HSL and HSLuv have a distorted chroma map, this is a trade-off of their convenient shape. Admittedly, HSLuv's chroma has more sudden shifts.

Lightness

This is why HSL is useless for working out contrast. The actual lightness varies drastically between hues.

For this demo I am using CIE's definition of lightness. Both CIELUV LCh and HSLuv use this component, so their picture is an even gray.

HSLuv

Lightness: 60%

HSL

Lightness: 60%

This demo should illustrate the uniformity of HSLuv's hue and the consistency of contrast when generating colors with HSLuv.