Color: Hue in HSL

Explore the role that Hue plays in the world of color.

Author:Geetesh Bajaj

Date Created: August 3, 2015Last Updated: August 3, 2015

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.

Color

H

S

L

Swatch

Red

0

255

128

Yellow

42

255

128

Green

85

255

128

Cyan

127

255

128

Blue

175

255

128

Magenta

213

255

128

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.

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?