Movatterモバイル変換


[0]ホーム

URL:


HSLuv vs. HSL

HSLCIELUV LChHSLuvHPLuv
LightnessRelativeAbsoluteAbsoluteAbsolute
Saturation*RelativeAbsoluteRelativeAbsolute
Saturation rangePercentUndefinedPercentPercent
Saturated colorsYesYesYesNo
Hue uniformityPoorGoodGoodGood
* Saturation and chroma are distinct concepts

Overview

HSL
CIELUV LCh

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

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

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

HSL
CIELUV LCh

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

HSLuv

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.

HPLuv

Lightness

HSL

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

CIELUV LCh
HSLuv

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.

HPLuv

HSLuv

Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%

HSL

Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%
Lightness: 60%

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


[8]ページ先頭

©2009-2025 Movatter.jp