HSL colour model

HSL (Hue, Saturation, Lightness) – is colour model in which color is defined by three parameters: Hue (tone), saturation, and lightness.
Let’s consider each parameter separately.

HUE

In order to determine the tone, you must specify the degree of rotation (0° to 360°) of the color wheel. There is a rainbow closed in a circle in which red is always oriented north and equals 0 degrees (360°) and all other colors, depending on how far north in the circle one’s point is, are oriented to the direction.

Saturation

The second HSL color model value defines the saturation of the selected hue and is specified as a percentage ranging from 0% to 100%. The closer the value is to 100%, the cleaner and more “lush” the color looks, and vice versa, if the saturation tends to 0%, the color “fades” and becomes gray.

Lightness

Lightness or brightness is the third HSL parameter. Just as saturation is indicated as a percentage… the higher the percentage, the brighter the color becomes. The extreme values of 0% and 100% will indicate black (no light) and white (lit) respectively. The optimal value for color brightness is 50%.

HSLA colour model

Alpha Transparency

HSLA color values are an extension of HSL color values with an alpha channel that defines the opacity for the color. HSLA color values are set with: hsla (hue, saturation, lightness, alpha), where the alpha parameter defines the opacity.