Colores HTML HSL y HSLA

HSL significa matiz, saturación y luz. Los valores de color HSLA son una extensión de HSL con un canal alfa (opacidad).

Valores de color HSL

In HTML, un color puede ser especificado usando matiz, saturación y luz, de la siguiente forma.

hsl(matiz, saturación, luz)
  • El matiz o tono es un grado en la rueda de color de 0 a 360. 0 es rojo, 120 es verde y 240 es azul.
  • La saturación es un valor porcentual, 0% significa un tono de gris y 100% es el color completo.
  • La luz o claridad también es un porcentaje, 0% es negro, 50% no es claro ni oscuro, 100% es blanco.

Ejm

HSL

Saturación

La saturación puede ser descrita como la intensidad de un color. 100% es el color puro, sin sombras de gris, 50% es un 50% gris, pero puede verse todavía el color, 0% es totalmente gris, con lo que no se verá el color original.

Ejm

Saturación HSL

Luz o claridad

La claridad de un color se puede describir como la cantidad de luz que desea dar al color, donde 0% significa que no hay luz (negro), 50% significa 50% de luz (ni oscura ni clara) 100% significa claridad total (blanco).

Ejm

Luz HSL

Los tonos de gris a menudo se definen configurando el tono y la saturación en 0, y ajustando la claridad del 0% al 100% para obtener tonos más oscuros / claros:

Ejm

Tonos de gris HSL

Valores de color HSLA

Los valores de color HSLA son una extensión de los valores de color HSL con un canal alfa, que especifica la opacidad de un color.

Un valor de color HSLA se especifica con:

hola(tono, saturación, luz, opacidad)

El parámetro opacidad es un número entre 0.0 (totalmente transparente) y 1.0 (totalmente opaco).

Ejm

HSLA