CSS hsl () Notación


Ejemplo

HSL significa tono ("qué color"), saturación ("cuánto color") y luminosidad ("cuánto blanco").

El tono se representa como un ángulo de 0 ° a 360 ° (sin unidades), mientras que la saturación y la luminosidad se representan como porcentajes.

p {
    color: hsl(240, 100%, 50%); /* Blue */
}

La rueda de color HSL

Sintaxis

color: hsl(<hue>, <saturation>%, <lightness>%);
Valor Descripción
<hue> especificado en grados alrededor de la rueda de color (sin unidades), donde 0 ° es rojo, 60 ° es amarillo, 120 ° es verde, 180 ° es cian, 240 ° es azul, 300 ° es magenta y 360 ° es rojo
<saturation> especificado en porcentaje donde el 0% está totalmente desaturado (escala de grises) y el 100% está completamente saturado (de color vivo)
<lightness> especificado en porcentaje donde 0% es completamente negro y 100% es completamente blanco

Notas

  • Una saturación del 0% siempre produce un color en escala de grises; Cambiar el tono no tiene efecto.

  • Una luminosidad del 0% siempre produce negro, y el 100% siempre produce blanco; Cambiar el tono o la saturación no tiene efecto.