Función oklch() en CSS

Definición y uso

Definición y uso en CSS oklch() La función se utiliza para especificar colores en el espacio de color OKLCH.

oklch() La función es muy intuitiva: debe considerar la cantidad de brillo / luminosidad (L) que utiliza, la intensidad del tono (gris) (C), y el color en sí (H). Además, puede elegir agregar un valor de canal de transparencia (A), que representa la opacidad del color.

ejemplos

Definir diferentes oklch() Color:

/* Diferentes niveles de brillo en verde /
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ Amarillos de diferentes brillos /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ Rojos de diferentes brillos */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

Prueba personalmente

Sintaxis de CSS

Sintaxis de valor absoluto

oklch(L C H / A)
Valor Descripción
L

Obligatorio. Define la luminosidad percibida del color (0 a 1 entre números o 0% a 100% entre porcentajes).

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

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

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

Debe ser un número entre -0.4 y 0.4 o un porcentaje entre -100% y 100%.

Al alcanzar el valor mínimo (0% o -0.4), el color se acerca más al gris.

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

Obligatorio. Define el color en sí mismo, que puede ser un número o un ángulo (de 0 a 360).

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

Opcional. Representa el valor del canal de transparencia del color (0% o 0 representa completamente transparente, 100% o 100 representa completamente opaco).

También se puede usar none (lo que representa el canal de transparencia sin transparencia).

El valor predeterminado es 100%.

Sintaxis de valor relativo

oklch(from color L C H / A)
Valor Descripción
from color

Empieza con el keyword from, seguido del valor del color que representa el color original.

Este es el color original sobre el que se basa el color relativo.
L

Obligatorio. Define la luminosidad percibida del color (0 a 1 entre números o 0% a 100% entre porcentajes).

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

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

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

Debe ser un número entre -0.4 y 0.4 o un porcentaje entre -100% y 100%.

Al alcanzar el valor mínimo (0% o -0.4), el color se acerca más al gris.

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

Obligatorio. Define el color en sí mismo, que puede ser un número o un ángulo (de 0 a 360).

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

Opcional. Representa el valor del canal de transparencia del color (0% o 0 representa completamente transparente, 100% o 100 representa completamente opaco).

También se puede usar none (lo que representa el 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
oklch()
111 111 113 15.4 97
Uso mixto de 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:Función hwb() de CSS

Referencia:Función lab() de CSS

Referencia:Función lch() de CSS

Referencia:Función oklab() de CSS