CSS oklab() function

Definition and usage

CSS oklab() The function is used to specify colors in the OKLAB color space. This color space is designed to simulate the way the human eye perceives colors.

examples

Define different oklab() Color:

#p1 {background-color:oklab(0 40% 20% / 0.5);}
#p2 {background-color:oklab(0.3 -40% -20%);}
#p3 {background-color:oklab(0.4 30% -20% / 20%);}
#p4 {background-color:oklab(0.5 60% 20%);}
#p5 {background-color:oklab(0.6 50% -10%);}
#p6 {background-color:oklab(0.7 70% -80% / 0.3);}
#p7 {background-color:oklab(0.8 70% 20% / 0.5);}
#p8 {background-color:oklab(0.9 80% -20%);}
#p9 {background-color:oklab(1 90% -100%);}

Prueba personalmente

Sintaxis de CSS

Sintaxis de valor absoluto

oklab(L Requerido. Define un número entre -0.4 y 0.4 o un porcentaje entre -100% y 100%. b / A)
Valor Descripción
L

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

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

También se puede usar None (equivalente a 0%).
Requerido. Define un número entre -0.4 y 0.4 o un porcentaje entre -100% y 100%.

Requerido. Define un número entre -0.4 y 0.4 o un porcentaje 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.

-0.4 representa verde, 0.4 representa rojo. También se puede usar none (equivalente a 0%).
b

Requerido. Define un número entre -0.4 y 0.4 o un porcentaje entre -100% y 100%.

Define la distancia del color a lo largo del eje b, que representa el grado de amarillo y azul del color.

-0.4 representa azul, 0.4 representa amarillo. También se puede usar none (equivalente a 0%).
/ 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 el canal de transparencia sin transparencia). El valor predeterminado es 100%.

Sintaxis de valor relativo

oklab(from color L Requerido. Define un número entre -0.4 y 0.4 o un porcentaje entre -100% y 100%. b / 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 basan los colores relativos.
L

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

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

a
Requerido. Define un número entre -0.4 y 0.4 o un porcentaje entre -100% y 100%.

Requerido. Define un número entre -0.4 y 0.4 o un porcentaje 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.

-0.4 representa verde, 0.4 representa rojo. También se puede usar none (equivalente a 0%).
b

Requerido. Define un número entre -0.4 y 0.4 o un porcentaje entre -100% y 100%.

Define la distancia del color a lo largo del eje b, que representa el grado de amarillo y azul del color.

-0.4 representa azul, 0.4 representa amarillo. También se puede usar none (equivalente a 0%).
/ 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 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
oklab()
111 111 113 15.4 97
Uso combinado 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 lch() de CSS

Referencia:Función lab() de CSS

Referencia:Función oklch() de CSS