Color Models: Hue in HSL

Colors can be darker or lighter: and this in color terms is called Luminosity. Color can also be saturated (vibrant) or desaturated (neutralized). Desaturation can be done to a lesser extent or more, and when it happens to the maximum extent possible, that’s the same as completely neutralizing the color altogether. Think about converting a colored picture to grayscale and you will understand what may be happening! This property of color is called Saturation.

Now beyond Luminosity and Saturation lies the Hue of color. You can have a blue that’s dark or light, and even vibrant or neutralized. But you can also have a green, a red, an orange, a yellow, or any other color with those same attributes. This red, green, yellow, or blue property is nothing else but the Hue of the color.

Let’s learn this better by looking at Figure 1, below. Yes, this is the same visual that we last saw in our Saturation article.

Figure 1: The only common property all over this colored expanse is blue

If we change nothing else but just the Hue from Blue to Green, we will end up with a similar looking visual, as shown in Figure 2, below.

Figure 2: Blue gives way to green with all other properties unchanged

Let us now explore various Hues that you can add to a color. This can be seen better in the Hue circle that you can see in Figure 3, below. Do note that these colors almost follow the sequencing as can be seen in the rainbow. And that’s not strange because these hues relate to the same scientific principles upon which the rainbow forms!

Figure 3: The Hues circle

Now if we were to flatten this circle to a bar, which is what you will encounter more often in interfaces of programs such as PowerPoint, then, this is what you will see, as shown in Figure 4, below.

Figure 4: The Hues bar

Now let us try and connect these Hues with some numbers. The numbers we will use to calculate the Hue are 0 to 255. Remember that these are the same numbers that we used for Luminosity and Saturation. Notice in Figure 4, above that our Hues bar starts with red. That’s not surprising since a pure Red has a Hue value of 0.

Look at Figure 5, below to see the Hue values of some common colors.

Figure 5: Hue values of some common colors

The amazing part of the colors we explored is that they all have the same Luminosity and Saturation values, and only their Hue values were changed. Look at the table below to understand how this works.

What did we learn from all this color science? We learned that Hue provides the actual pure color whereas other color characteristics come from the Luminosity and Saturation properties.

See Also: Color: HSL | Luminosity | Saturation