HSL Colors

HSL stands for Hue, Saturation, and Lightness.

We select the hue in degrees from the following color wheel:

Then we choose the saturation and lightness as percentages. Example:

p {
	color: hsl(180, 100%, 50%);
}

This selects the hue corresponding to 180 degrees on the color wheel, which is light blue, with 100% saturation and 50% lightness. This way, the light blue color will look the same as you see it on the color wheel.

To create black, any hue and saturation can be used, the only requirement is 0% lightness. For white, the hue and saturation don't matter, we just need 100% lightness.

The advantage of HSL colors is that when we need a slightly darker or lighter color, we can simply decrease or increase the lightness, whereas with RGB or hexadecimal colors, it would require adjusting all color components.