La función LAB() y OKLAB()

¿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 o .
`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 l es la luminosidad negro-blanco: un valor de 0% a 100% o entre 0 y 100.
La cifra a es la luminosidad verde-rojo: un valor de -100% a 100% o entre -125 y 125.
La cifra b es la luminosidad azul-amarillo un valor de -100% a 100% o entre -125 y 125.

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 a y b con en 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 o .
`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 l es la luminosidad negro-blanco: un valor de 0% a 100% o entre 0 y 1.
El valor a es la luminosidad verde-rojo: un valor de -100% a 100% o entre -0.4 y 0.4.
El valor b es la luminosidad azul-amarillo: un valor de -100% a 100% o entre -0.4 y 0.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 , como un dígito del 0 al 1, con decimales, como en formato , donde el número iría desde 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.