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 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(luminosidad negro-blanco) es un valor( 0%a100%) o( 0y100). - El valor
c(saturación) es un valor( 0%a100%) o( 0y150). - La valor
h(tono de color) es un valor( 0degy360deg) 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
cconen 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 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(luminosidad negro-blanco) es un valor( 0%a100%) o( 0y100). - El valor
c(saturación) es un valor( 0%a100%) o( 0y0.4). - La valor
h(tono de color) es un valor( 0degy360deg) 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
cconen 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 0 al 1, con decimales, como en formato 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.
