Adjust the hue of a color inCSS

The hue of a color: 

Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the hsl() property as an alternative way to pick a color by directly stating these characteristics.

Hue is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In hsl(), hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.

Saturation is the amount of gray in a color. A fully saturated color has no gray in it, and minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.

Lightness is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.

Here are a few examples of using hsl() with fully-saturated, normal lightness colors:

COLOR                                                                                                        HUE

red                                                                                                     hsl(0, 100%, 50%)

yellow                                                                                                      hsl(60, 100%, 50%)

green                                                                                                     hsl(120, 100%, 50%)

cyan                                                                                                     hsl(180, 100%, 50%)

blue                                                                                                     hsl(240, 100%, 50%)

magenta                                                                                             hsl(300, 100%, 50%)

The Syntax for this is:

 .blue {

    background-color: hsl(240, 100%, 50%);

  }

Adjust the tone of a color:

The hsl() option in CSS also makes it easy to adjust the tone of a color.

 Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. 

Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of hsl() stand for saturation and lightness, respectively.

 The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. 

This is useful when you have a base hue you like, but need different variations of it.