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 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()
:
l
es la luminosidad negro-blanco: un valor 0%
a 100%
o 0
y 100
.c
es la saturación: un valor 0%
a 100%
o 0
y 150
.h
es el tono de color: un valor 0deg
y 360deg
o 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
conen lugar de , puesto que algunos navegadores posiblemente aún no lo tengan implementado.
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()
:
l
es la luminosidad negro-blanco: un valor 0%
a 100%
o 0
y 100
.c
es la saturación: un valor 0%
a 100%
o 0
y 0.4
.h
es el tono de color: un valor 0deg
y 360deg
o 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
conen lugar de , puesto que algunos navegadores posiblemente aún no lo tengan implementado.
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()
.
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
.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev