Notes on the models
There is no single best color model. Each was made for a different task and is good at different things. This page collects the conclusions of the whole section: what to choose and what to avoid.
Which model for what
| Task | Model | Why |
|---|---|---|
| storing a color in a file, CSS, a UI | sRGB (HEX) | the default for screens and the web |
| color picker, manual selection | HSV / HSB | hue, saturation and "strength" separately |
| simple lighter / darker variants | HSL | white and black at the ends of one axis |
| image segmentation and analysis | HSI | geometry consistent with the RGB cube |
| printing | CMYK via an ICC profile | describes inks, but only with a profile |
| physical computation, mixing light | linear RGB, CIE XYZ | linear in light |
| comparing colors, tolerances, ΔE | CIELAB | roughly uniform to the eye |
| palettes of equal lightness, gradients | LCh, Oklab | constant lightness while hue changes |
| image and video compression | YCbCr | allows lower color resolution |
| text contrast | relative luminance | required by WCAG |
The most common mistakes
- Computing on gamma-encoded values. Averaging, blurring, resizing and blending need linear light. On sRGB values the results come out too dark and muddy (see gamma correction).
- Treating RGB as a color. RGB without a space (sRGB, P3, Adobe RGB) is just three numbers. The same goes for HSV and HSL, which are transformations of RGB (see device-dependent models).
- Confusing HSL with HSV. Hue is the same, but S and the third component are not. 80% saturation in HSV is 66.7% in HSL for the same color.
- Taking HSL's L or HSV's V as brightness. Pure blue and pure yellow have the same L and V, yet to the eye they differ by almost two thirds of the scale (see lightness).
- Using the simple CMYK formula for print. K = 1 - max(R, G, B) is a geometric transformation. A real print needs a profile of the print process.
- Lab without a white point. The same color has different Lab values under D50 and D65 (see white points).
- Confusing luma with luminance. Video Y' is computed on gamma-encoded values and for saturated colors can differ from Y by a factor of several.
- Using RGB distance as color difference. The same RGB distance means very different visible differences in different places. That is what ΔE in CIELAB is for.
One color in every model
The example used throughout the section, RGB (200, 80, 40):
HEX #c85028
HSV H 15° S 80.0% V 78.4%
HSL H 15° L 47.1% S 66.7%
HSI H 13.9° S 62.5% I 41.8%
CMYK C 0% M 60% Y 80% K 21.6%
XYZ (D65) X 27.07 Y 18.17 Z 4.09
xyY x 0.5488 y 0.3684 Y 18.17
CIELAB L* 49.71 a* 45.77 b* 46.31
LCh L* 49.71 C* 65.11 h 45.3°
CIELUV L* 49.71 u* 96.49 v* 36.18
YUV Y' 0.4365 U -0.1376 V 0.3050
YCbCr Y 111.3 Cb 87.8 Cr 191.3
Next: conversions between models, with formulas in both directions.