¿Qué es LAB?
El término LAB es una forma de hacer referencia a CIELAB (CIE 1976 L*a*b*), un modelo de color mucho más completo y realista que otros espacios de color como RGB, HSL, etc. Las siglas LAB significan Luminosidad CIE:
- La L representa la luminosidad de negro a blanco.
- La A representa la luminosidad de verde a rojo.
- La B representa la luminosidad de azul a amarillo.
La función lab()
La forma de usar el modelo LAB en CSS es mediante la función lab(). Para ello, utilizaremos los 3 parámetros L, A y B:
| Función LAB | Descripción |
|---|---|
lab(l a b) | Tres parámetros, donde puedes indicar formato con |
lab(l a b / t) | Idem al anterior, añadiendo un canal alfa de transparencia t, separado por /. Ver canales alfa |
Ahora, expliquemos los parámetros de la función lab():
- El valor
les la luminosidad negro-blanco: un valorde 0%a100%oentre 0y100. - La cifra
aes la luminosidad verde-rojo: un valorde -100%a100%oentre -125y125. - La cifra
bes la luminosidad azul-amarillo un valorde -100%a100%oentre -125y125.
Veamos algunos ejemplos de la aplicación de la función lab() en nuestro código:
.element {
background-color: lab(100 -100 -100);
background-color: lab(75% -50 50);
background-color: lab(25 25 125);
}
Es preferible utilizar los valores
aybconen lugar de , puesto que algunos navegadores posiblemente aún no lo tengan implementado.
La función oklab()
La función oklab() es una mejora de la función lab(). Los parámetros de la función oklab() cambian ligeramente respecto a lab():
| Función OKLAB | Descripción |
|---|---|
oklab(l a b) | Tres parámetros, donde puedes indicar formato con |
oklab(l a b / t) | Idem al anterior, añadiendo un canal alfa de transparencia t, separado por /. Ver canales alfa |
Ahora, expliquemos los parámetros de la función oklab():
- El valor
les la luminosidad negro-blanco: un valorde 0%a100%oentre 0y1. - El valor
aes la luminosidad verde-rojo: un valorde -100%a100%oentre -0.4y0.4. - El valor
bes la luminosidad azul-amarillo: un valorde -100%a100%oentre -0.4y0.4.
Canal alfa o transparencia
Al igual que con otros esquemas o modelos de color, también se pueden especificar canales alfa de transparencia en un color. Para ello, solo tenemos que añadir un parámetro más en la lista, separado por un slash /:
| Método | Descripción |
|---|---|
lab(l a b / t) | Se añade un canal alfa de transparencia t, separado por /. |
oklab(l a b / t) | Se añade un canal alfa de transparencia t, separado por /. |
Recuerda que este número puede indicarse tanto en formato 0 al 1, con decimales, como en formato 0% hasta 100%:
.element {
background-color: lab(80 -50 100 / 75%);
background-color: oklab(80% 0.2 -0.2 / 0.75);
}
De esta forma podemos indicar colores con cierto grado de transparencia usando la función lab() o oklab().
Comparación lab() vs oklab()
En las siguientes tablas podemos ver la diferencia entre la función lab() y la función oklab(). Observa que, dejando el ratón sobre el cuadrito, puedes ver el valor que estamos utilizando.
Mientras que los parámetros A y B de lab() se mueven entre valores -125 y 125, los parámetros A y B de oklab() se mueven entre valores -0.4 y 0.4.
