Explore how Saturation works within the HSL color model.
Author: Geetesh Bajaj
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.
Have your ever used keyboard shortcuts and sequences in PowerPoint? Or are you a complete keyboard aficionado? Do you want to learn about some new shortcuts? Or do you want to know if your favorite keyboard shortcuts are documented?
Go and get a copy of our PowerPoint Keyboard Shortcuts and Sequences ebook.
Microsoft and the Office logo are trademarks or registered trademarks of Microsoft Corporation in the United States and/or other countries.