Color Models: Saturation in HSL

Color is a fascinating subject; a subject that evokes enough creativity and pickles the minds of many. If we were to pause looking at color as a creative subject for just a brief amount of time, we would be able to explore it from a different perspective, the perspective of science! This color science will open new avenues for us to understand why colors behave in certain ways. For example, why do some colors look more vibrant than others? What is this quality that makes them shout? And why are some colors so muted? what makes them so understated and well-behaved? Well, the quality of color that makes all this shouting and mellowing happen is called Saturation, and believe it or not, it has everything to do with the color grey. We will learn more about what grey does to colors in this tutorial.

Before we get to Saturation, let us revisit Luminosity, which in simple terms is the amount of white (lightness) or black (darkness) within a color. Figure 1 below shows a Luminosity bar for the color, blue. This will be our starting point to learn more about Saturation.

Figure 1: Luminosity spans from darkest to lightest

Let’s now take the color that’s right in the center of the Luminosity bar. This is pure blue with the HSL values mentioned within the table below.

Now let us neutralize this pure, saturated color. To do that you will reduce the Saturation value that is currently set to the maximum value of 255. In Figure 2, below you can see that we have added a Saturation bar that stands perpendicular to our horizontal Luminosity bar.

Figure 2: An added Saturation bar

Notice that when we reduce the Saturation levels from 255 to 0, we are left with something that’s neutralized with almost no color, you end up with a grey!

You can see how these changed HSL values influence the blue within this table:

Now let us not neutralize all the way to zero levels of Saturation, and see how the resulting colors fare with lesser values of Saturation, as shown in Figure 3, below.

Figure 3: Varying levels of Saturation

Now explore these same colors within this table:

Also do remember that we started with the pure value of blue on the Luminosity bar. If you create similar perpendicular Saturation bars for more Luminosity values, you can see how you can end up with an entire spectrum of blue colors by just changing the Luminosity and Saturation values, as shown in Figure 4, below.

Figure 4: All Luminosity and Saturation values of blue

What if we were to just delete all the bars and make them all merge into one blue spectrum? You will then end up with something similar to what you can see in Figure 5, below.

Figure 5: A blue spectrum

Look closely at Figure 5 again. This may look very simple but clearly there’s so much to learn here. The bottom middle area is where you start with a pure blue. Still within the lower area, you will go left to darken the Luminosity, or go rightwards to lighten. And in all cases, you will go upwards to remove Saturation.

Now we have explored both Luminosity and Saturation. That still means that we need to look at Hue, the last property within the HSL color model.

See Also: Color: HSL | Luminosity | Hue