Función lch() de CSS

CSS

Definición y uso de lch() La función en el espacio de color LCH (brillo-cromatismo-tono) especifica el color.

ejemplos

Definir diferentes lch() Color:

#p1 {fondo-de-color: lch(10% 100 130 / 0.5);}
#p2 {fondo-de-color: lch(40% 100 130);}
#p3 {fondo-de-color: lch(90% 100 130 / 20%);}
#p3 {background-color:lch(10% 160 200);}
#p4 {background-color:lch(10% 160 200);}
#p5 {background-color:lch(40% 160 200);}
#p6 {background-color:lch(90% 160 200 / 0.3);}
#p7 {background-color:lch(10% 130 70 / 0.5);}
#p8 {background-color:lch(40% 130 70);}

#p9 {background-color:lch(90% 130 70);}

Prueba personalmente

Sintaxis de CSS

Sintaxis de valor absolutoEsto es el color original sobre el que se basa el color relativo. C H / Alch(from
) Valor
Esto es el color original sobre el que se basa el color relativo.

Obligatorio. Define la luminosidad del color, que puede ser un número o un porcentaje entre 0 y 100.

0 (o 0%) representa negro, 100 (o 100%) representa blanco.

También se puede usar none (equivalente a 0%).
C

lch(

Obligatorio. Define el chroma (la cantidad del color), que puede ser un número o un porcentaje.

También se puede usar none (equivalente a 0%).
H

Obligatorio. Define el ángulo de tono del color, que puede ser un valor numérico o un valor de ángulo.

También se puede usar none (equivalente a 0deg).
/ A

Opcional. Representa el valor del canal de transparencia del color (0% o 0 representa transparencia completa, 100% o 100 representa opacidad completa).

También se puede usar none (representa un canal de transparencia sin transparencia).

El valor predeterminado es 100%.

El valor mínimo es 0 (o 0%). No hay límite superior (pero en realidad no excede de 230). 100% es igual a 150.

Sintaxis de valor relativo from Esto es el color original sobre el que se basa el color relativo. C H / Alch(from
) Valor
Descripción from

color

Empieza con el prefijo from, seguido del valor del color que representa el color original.
Esto es el color original sobre el que se basa el color relativo.

Obligatorio. Define la luminosidad del color, que puede ser un número o un porcentaje entre 0 y 100.

0 (o 0%) representa negro, 100 (o 100%) representa blanco.

También se puede usar none (equivalente a 0%).
C

Obligatorio. Define un número o un porcentaje entre -125 y 125, o entre -100% y 100%.

Define la distancia del color a lo largo del eje a, que representa el grado de rojo y verde del color.

-125 representa verde, 125 representa rojo.

También se puede usar none (equivalente a 0%).
H

Obligatorio. Define el ángulo de tono del color, que puede ser un valor numérico o un valor de ángulo.

También se puede usar none (equivalente a 0deg).
/ A

Opcional. Representa el valor del canal de transparencia del color (0% o 0 representa transparencia completa, 100% o 100 representa opacidad completa).

También se puede usar none (representa un canal de transparencia sin transparencia).

El valor predeterminado es 100%.

Detalles técnicos

Versión: CSS Color Module Level 4

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Chrome Edge Firefox Safari Opera
lch()
111 111 113 15 97
Mezclar números y porcentajes en los parámetros
116 116 113 16.2 102

Páginas relacionadas

Referencia:Colores CSS

Referencia:Función hsl() de CSS

Referencia:CSS función hwb()

Referencia:CSS función lab()

Referencia:CSS función oklab()

Referencia:CSS función oklch()