Expresar un color en HSL ofrece ventajas frente a otras expresiones.- Por ejemplo, expresar el color en Hexadecimal tiene ciertas desventajas:

• Son limitantes.- No es fácil alterar el color sin abrir una rueda de colores y además no es fácil adivinar qué color es al mirar el código hexadecimal.
• Son difíciles de entender al leerlos.

Por ejemplo, si de un mismo color queremos  obtener su claro y oscuro, tendremos que conocer de memoria las coordenadas en hexadecimal: 

• Sky Blue (defecto) #56Bfe4
• Sky Blue (obscuro) #4ca9c9

Frente a esto, HSL presenta ventajas. Expresando el color en HSL  es posible obtener, de manera fácil e intuitiva, diferentes luminosidades de color (mismo color, diferente luminosidad, claro o oscuro). Considerando el ejercicio anterior, el color Sky blue se expresa de la siguiente manera:

.element {
    background-color: hsl(196, 73%, 62%);
}

donde, 196º = Azul cielo cerca del CYAN, 73% = Saturación, 62% = Luminosidad. A partir de estos valores, es más fácil encontrar un claro y un oscuro, con solo variar el % de luminosidad.

background-color: hsl(196, 73%, 70%); /* claro */
background-color: hsl(196, 73%, 40%); /* oscuro */

Además, es posible fácilmente generar una gama de colores que comparten cierta relación. Por ejemplo, se puede variar el ángulo de tonalidad y mantener los porcentajes de saturación y luminosidad para obtener tres colores RELACIONADOS en SATURACION y LUMINOSIDAD

hsl(196, 73%, 62%)
hsl(166, 73%, 62%)
hsl (222, 73%, 62%)