What is saturation? HSL, HSV, saturation, vibrance and more
An exploration of saturation, chroma, and vibrance. Learn how HSL and HSV define saturation mathematically, and how modern color spaces correct their limitations.
1. RGB, HSL, HSV and OKLCh
First let’s get familiar with the 3D representation of color in different model. Have fun toggling between RGB, HSL, HSV and OKLCH, and see how they represent the same color differently.
2. What is Saturation?
There are many ways to define saturation, but let’s take a look at 3 popular definitions: HSL, HSV and luma-based saturation. Luma-based saturation is the good-old saturation slider found in all image editing software.
The mathematical definition of saturation is incredibly simple: spread the RGB channels apart while trying to maintain hue and lightness.
The interactive graph below shows how these models try to maintain hue and lightness, and also how they fail to do so. Notice 3 things:
-
HSV anchors at the brightest channel, and to increase saturation it lowers the other two channels proportinally. That’s why it is called subtractive saturation, and the lightness of the resulting color is always reduced.
-
HSL anchors at the average of the brightest and darkest channels. It might increase or decrease the final brightness.
-
If a channel is clipped (i.e. at 0 or 100), increasing HSL or HSV saturation has no effect. However, luma-based saturation will continue trying to do something and thereby distort the hue tremendously.
3. What is Vibrance
In Adobe Lightroom, Vibrance is simply HSL saturation, but with the annoying quirk that it doesn’t target red, orange and magenta as much as it targets other hues. The intention is to prevent skin tones from going orange, but the result is that Lightroom simply doesn’t have a good overall saturation slider that works for all colors.