CSS lab() function
- Página anterior CSS invert() función
- Página siguiente CSS lch() función
- Volver a la capa superior Manual de funciones de CSS
Definition and usage
CSS's lab()
The function specifies the color in the CIE Lab color space. This color space represents all the colors visible to the human eye.
examples
Define different lab()
Color:
#p1 {background-color:lab(0 40% 20% / 0.5);} #p2 {background-color:lab(30 -40% -20%);} #p3 {background-color:lab(40 30% -20% / 20%);} #p4 {background-color:lab(50 60% 20%);} #p5 {background-color:lab(60 50% -10%);} #p6 {background-color:lab(70 70% -80% / 0.3);} #p7 {background-color:lab(80 70% 20% / 0.5);} #p8 {background-color:lab(90 80% -20%);} #p9 {background-color:lab(100 90% -100%);}
Sintaxis de CSS
Sintaxis de valor absoluto
lab(L a b / A)
Valor | Descripción |
---|---|
L |
Obligatorio. Define la luminosidad del color, que puede ser un número o un porcentaje entre 0 y 100. 0 (o 0%) representa el negro, 100 (o 100%) representa el blanco. También se puede usar none (equivalente al 0%). |
a |
Obligatorio. Define un número entre -125 y 125 o un porcentaje entre -100% y 100%. Define la distancia del color a lo largo del eje a, que representa el grado de rojo y verde del color. -125 representa el verde, 125 representa el rojo. También se puede usar none (equivalente al 0%). |
b |
Obligatorio. Define un número entre -125 y 125 o un porcentaje entre -100% y 100%. Define la distancia del color a lo largo del eje b, que representa el grado de amarillo y azul del color. -125 representa el azul, 125 representa el amarillo. También se puede usar none (equivalente al 0%). |
/ A |
Opcional. Representa el valor del canal de transparencia del color (0% o 0 representa completamente transparente, 100% o 100 representa completamente opaco). También se puede usar none (que representa el canal de transparencia sin transparencia). El valor predeterminado es 100%. |
Sintaxis de valor relativo
lab(from color L a b / A)
Valor | Descripción |
---|---|
from color |
Empieza con el keyword from, seguido del valor del color que representa el color original. Este es el color original en el que se basa el color relativo. |
L |
Obligatorio. Define la luminosidad del color, que puede ser un número o un porcentaje entre 0 y 100. 0 (o 0%) representa el negro, 100 (o 100%) representa el blanco. También se puede usar none (equivalente al 0%). |
a |
Obligatorio. Define un número entre -125 y 125 o un porcentaje entre -100% y 100%. Define la distancia del color a lo largo del eje a, que representa el grado de rojo y verde del color. -125 representa el verde, 125 representa el rojo. También se puede usar none (equivalente al 0%). |
b |
Obligatorio. Define un número entre -125 y 125 o un porcentaje entre -100% y 100%. Define la distancia del color a lo largo del eje b, que representa el grado de amarillo y azul del color. -125 representa el azul, 125 representa el amarillo. También se puede usar none (equivalente al 0%). |
/ A |
Opcional. Representa el valor del canal de transparencia del color (0% o 0 representa completamente transparente, 100% o 100 representa completamente opaco). También se puede usar none (que representa el canal de transparencia sin transparencia). El valor predeterminado es 100%. |
Detalles técnicos
Versión: | CSS Color Module Level 4 |
---|
Compatibilidad del navegador
Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
lab() | ||||
111 | 111 | 113 | 15 | 97 |
Mezclar números y porcentajes en los parámetros | ||||
116 | 116 | 113 | 16.2 | 102 |
Páginas relacionadas
Referencia:Colores de CSS
Referencia:Función hsl() de CSS
Referencia:CSS hwb() función
Referencia:CSS lch() función
Referencia:CSS oklab() función
Referencia:CSS oklch() función
- Página anterior CSS invert() función
- Página siguiente CSS lch() función
- Volver a la capa superior Manual de funciones de CSS