Colores HSL de CSS
- Página anterior Colores HEX de CSS
- Página siguiente Fondo de CSS
Valores de HSL
En CSS, se puede especificar el color utilizando tono, saturación y luminosidad (HSL), con el formato siguiente:
hsla(tono, saturación, lucidez)
Tono (tono）es el ángulo en grados del círculo cromático desde 0 a 360. 0 es rojo, 120 es verde, y 240 es azul.
Saturación (saturación）es un valor porcentual, el 0% representa una sombra gris y el 100% es el color completo.
Brillo (lucidez）también es un porcentaje, el 0% es negro, el 50% es ni claro ni oscuro, y el 100% es blanco.
Experimente mezclando los siguientes valores de HSL:
TONO
SATURACIÓN
LUCIDEZ
Ejemplo
Saturación
La saturación se puede describir como la intensidad del color.
El 100% es un color puro, sin sombras grises
El 50% es 50% de gris, pero aún puede ver colores.
El 0% es completamente gris, no puede ver colores.
Ejemplo
Brillo
La luminosidad del color se puede describir como cuánta luz se le dará al color, donde el 0% representa un color oscuro (negro), el 50% representa un 50% de brillo (ni oscuro ni claro), y el 100% representa un brillo completo (blanco).
Ejemplo
Generalmente, se define el tono y la saturación en 0 para definir sombras grises y ajustar el brillo desde el 0% al 100% para obtener sombras más oscuras o más claras:
Ejemplo
Valores de HSLA
El valor de color HSLA es una extensión del valor de color HSL con canal Alpha - especifica la opacidad del color.
El valor de color HSLA se especifica como:
hsla(tono, saturación, lucidez, alfa)
alfa Los parámetros son números entre 0.0 (completamente transparente) y 1.0 (completamente opaco):
Realice experimentos mezclando los siguientes valores HSLA:
TONO
SATURACIÓN
LUCIDEZ
ALPHA
Ejemplo
- Página anterior Colores HEX de CSS
- Página siguiente Fondo de CSS
