Color Models: Luminosity in HSL

We explored the HSL color model broadly previously. Now, we will look at Luminosity, one of its three properties. So what is Luminosity? Luminosity is the value that spans from pure black (darkest) to pure white (lightest), as can be seen in Figure 1, below.

Figure 1: Luminosity spans from darkest to lightest

Now how does Luminosity influence any color? Let's take blue for example. Look at the top bar in Figure 2, below where you can see a blue shape. If we add the Luminosity bar to it, which is the same as what you saw in Figure 1, above, we will then see the results as shown within the bottom bar in Figure 2.

Figure 2: Luminosity can influence colors

Now let us see how Luminosity influences six hues of the RGB color model, as shown in Figure 3, below.

Figure 3: Luminosity can influence any color hue

The three primary colors in the RGB model (Red, Blue, Green) as well as the three secondary colors (Yellow, Cyan, Magenta) all have a Luminosity value of 128, as can be seen within the table below:

That's not surprising, and this makes it easy for us humans to understand that all basic colors (primary and secondary) have some common traits. You can see that 128 is the value at the center of each of the bars you see in Figure 4, below.

Figure 4: Pure hues are halfway through the Luminosity bars

Let us now change the Luminosity values of all these 6 colors. We changed the Luminosity of all 6 colors to 192 to end up with lighter variations of the same colors. This is almost the same as mixing some white into the basic colors!

Look at the same color bars again in Figure 5 below. You can see that these values match where the Luminosity is set at 192, this is more towards white (the right side).

Figure 5: Luminosity slides towards white

Next let us change the Luminosity value to something lower such as 64, so that we end up with darker variations of these colors. This is akin to mixing some black into these basic colors, as can be seen in the table below.

Look at the same color bars again in Figure 6 below. You can see that these values match where the Luminosity is set at 64. This is more towards black (the left side).

Figure 6: Luminosity slides towards black

Let’s take this experiment to its logical conclusion now, and change all Luminosity values to an even lower value, such as 16. You will see that the color values we end up with are almost black, as can be seen in the table below.

Look at the same color bars again in Figure 7 below. You can see that these values match where the Luminosity is set at 16. This is almost black.

Figure 7: All colors are now almost black

If we now change the Luminosity values to 0 (zero) for all colors, it does not matter what Hue or Saturation values they have – they will all be black! This reasoning is easy to explain using an analogy. In a very dark room, if you switch off the light you will be left with pitch darkness, and any object of any color will appear black. That’s precisely what's happening here too!

The reverse is also true. If you are blinded with too much light, everything will appear white. And that’s exactly what will happen if you change all Luminosity values to 255.

So the main takeaway from Luminosity is that you can make as many changes as you want to your Hue and Saturation values. But if your Luminosity values are not set optimally, then all you will see is either black or white! That’s the reason we decided to explore Luminosity before Saturation and Hue, the other two properties.

See Also: Color: HSL | Saturation | Hue