La función LCH() y OKLCH()

¿Qué es LCH?

El término LCH es una forma de hacer referencia a CIE LCH, un modelo de color donde la L de luminosidad es idéntico a CIE LAB, pero utiliza coordenadas cilíndricas en los parámetros C y H:

• La L representa la luminosidad de negro a blanco.
• La C representa la saturación, en forma de distancia geométrica desde el eje L.
• La H representa el tono de color, en forma de ángulo desde el eje A positivo y el eje B positivo.

La función lch()

La forma de usar el modelo LCH en CSS es mediante la función lch(). Para ello, utilizaremos los 3 parámetros L, C y H:

Función LCH	Descripción
lch(l c h)	Puedes indicar formato con o en l y c.
lch(l c h / a)	Idem al anterior, añadiendo un canal alfa de transparencia a, separado por /. Ver canales alfa

Ahora, expliquemos los parámetros de la función lch():

• El valor l es la luminosidad negro-blanco: un valor de 0% a 100% o entre 0 y 100.
• El valor c es la saturación: un valor de 0% a 100% o entre 0 y 150.
• La valor h es el tono de color: un valor entre 0deg y 360deg o sin unidades.

Veamos algunos ejemplos de la aplicación de la función lab() en nuestro código:

.element {
  background-color: lch(50 75 50);
  background-color: lch(50% 135 360deg);
  background-color: lch(25% 150 360);
}

Es preferible utilizar los valores c con en lugar de , puesto que algunos navegadores posiblemente aún no lo tengan implementado.

La función oklch()

La función oklch() es una mejora de la función lch(). Los parámetros de la función oklch() cambian ligeramente respecto a lch():

Función OKLCH	Descripción
oklch(l c h)	Puedes indicar formato con o en l y c.
oklch(l c h / a)	Idem al anterior, añadiendo un canal alfa de transparencia a, separado por /. Ver canales alfa

Ahora, expliquemos los parámetros de la función lch():

• El valor l es la luminosidad negro-blanco: un valor de 0% a 100% o entre 0 y 100.
• El valor c es la saturación: un valor de 0% a 100% o entre 0 y 0.4.
• La valor h es el tono de color: un valor entre 0deg y 360deg o sin unidades.

Veamos algunos ejemplos de la aplicación de la función oklch() en nuestro código:

.element {
  background-color: oklch(0.5 0.3 50);
  background-color: oklch(50% 0.2 160deg);
  background-color: oklch(1 0.1 360);
}

Es preferible utilizar los valores c con en lugar de , puesto que algunos navegadores posiblemente aún no lo tengan implementado.

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
lch(l c h / a)	Se añade un canal alfa de transparencia a, separado por /.
oklch(l c h / a)	Se añade un canal alfa de transparencia a, 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: oklch(0.5 0.3 50 / 75%);
  background-color: oklch(0.5 0.3 50 / 0.75);
}

De esta forma podemos indicar colores con cierto grado de transparencia usando la función lch() o oklch().

Comparación lch() vs oklch()

En las siguientes tablas podemos ver la diferencia entre la función lch() y la función oklch(). Observa que, dejando el ratón sobre el cuadrito, puedes ver el valor que estamos utilizando.

Mientras que los parámetros C y H de lch() se mueven entre valores 0 y 150, los parámetros C y H de oklch() se mueven entre valores 0 y 0.4.