horario-curso

Manual de referencia CSS

propiedad-CSS

Curso optativo

Recomendación de curso:

Caja de herramientas de CodeW3C.com

Función hsl() de CSS

Página anterior Función grayscale() de CSS
Página siguiente Función hue-rotate() de CSS
Volver a la capa superior Manual de funciones CSS

Definición y uso

Definición y uso de CSS hsl() La función utiliza el modelo de color tono-saturación-luminosidad (HSL) para especificar colores. También se puede agregar un componente opcional alpha (que representa la transparencia del color).

Consejo:HSL representa el tono (Hue), la saturación (Saturation) y la luminosidad (Lightness), que es la representación cónica del color.

Atención:hsla() La función es hsl() Alias de la función. Se recomienda usar hsl() Función.

Ejemplo

Ejemplo 1

Definir diferentes colores HSL(A):

#p1 {background-color:hsl(120 100% 50%);} /* Verde */
#p2 {background-color:hsl(120 100% 75%);} /* Verde claro */
#p3 {background-color:hsl(120 100% 25%);} /* Verde oscuro */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* Verde oscuro con transparencia */
#p5 {background-color:hsl(120 60% 70%);} /* Verde suave */
#p6 {background-color:hsl(290 100% 50%);} /* Púrpura */
#p7 {background-color:hsl(290 60% 70%);} /* Tono púrpura suave */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* Tono púrpura suave con transparencia */

Prueba personalmente

Ejemplo 2

Usar la sintaxis antigua de separación de valores con comas:

#p1 {background-color:hsl(120, 100%, 50%);} /* Verde */
#p2 {background-color:hsl(120, 100%, 75%);} /* Verde claro */
#p3 {background-color:hsl(120, 100%, 25%);} /* Verde oscuro */
#p4 {background-color:hsl(120, 60%, 70%);} /* Verde suave */
#p5 {background-color:hsl(290, 100%, 50%);} /* Púrpura */
#p6 {background-color:hsl(290, 60%, 70%);} /* Púrpura suave */

Prueba personalmente

Sintaxis de CSS

Sintaxis de valor absoluto

hsl(tono saturación luminosidad / A)

Valor	Descripción
tono	Obligatorio. Define el ángulo en el círculo cromático (de 0 a 360) - 0 (o 360) es rojo, 120 es verde, 240 es azul.
saturación	Obligatorio. Define la saturación del color; 0% es gris, 100% es pleno color (saturación completa). También se puede usar None (lo mismo que 0%).
luminosidad	Obligatorio. Define la luminosidad del color; 0% es negro, 50% es normal, 100% es blanco. También se puede usar None (lo mismo que 0%).
/ A	Opcional. Representa el valor del canal alpha del color (desde 0% (o 0) - completamente transparente hasta 100% (o 100) - completamente opaco). También se puede usar None (que representa que no hay canal alpha). El valor predeterminado es 100%.

Sintaxis de valor relativo

hsl(from color tono saturación luminosidad / A)

Valor	Descripción
from color	Empieza con el keyword from, seguido de un valor de color que representa el color original. Este es el color original en el que se basa el color relativo.
tono	Obligatorio. Define el ángulo en el círculo cromático (de 0 a 360) - 0 (o 360) es rojo, 120 es verde, 240 es azul.
saturación	Obligatorio. Define la saturación del color; 0% es gris, 100% es pleno color (saturación completa). También se puede usar None (lo mismo que 0%).
luminosidad	Obligatorio. Define la luminosidad del color; 0% es negro, 50% es normal, 100% es blanco. También se puede usar None (lo mismo que 0%).
/ A	Opcional. Representa el valor del canal alpha del color (desde 0% (o 0) - completamente transparente hasta 100% (o 100) - completamente opaco). También se puede usar None (que representa que no hay canal alpha). El valor predeterminado es 100%.