Função oklab() do CSS

Definição e uso

Definição e uso do CSS oklab() A função é usada para especificar cores no espaço de cor OKLAB. Este espaço de cor visa simular a maneira como os olhos humanos percebem as cores.

exemplos

Definir diferentes oklab() Cor:

#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%);}
#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%);}

Experimente você mesmo

Sintaxe CSS

Sintaxe de valor absolutoEsta é a cor original baseada na cor relativa. Opcional. Também pode usar none (equivalente a 0%). b / Aoklab(from
) Valor
Esta é a cor original baseada na cor relativa.

L

Obrigatório. Define a luminosidade percebida da cor, que pode ser um número entre 0 e 1 ou uma porcentagem entre 0% e 100%.

oklab(
Opcional. Também pode usar none (equivalente a 0%).

Obrigatório. Define um número entre -0.4 e 0.4 ou uma porcentagem entre -100% e 100%.

Define a distância da cor ao longo do eixo a, representando o grau de vermelho-verde da cor.

-0.4 representa verde, 0.4 representa vermelho. Também pode usar none (equivalente a 0%).
b

Obrigatório. Define um número entre -0.4 e 0.4 ou uma porcentagem entre -100% e 100%.

Define a distância da cor ao longo do eixo b, representando o grau de amarelo-azul da cor.

-0.4 representa azul, 0.4 representa amarelo. Também pode usar none (equivalente a 0%).
/ A

Opcional. Representa o valor do canal de transparência da cor (0% ou 0 representa completa transparência, 100% ou 100 representa completa opacidade).

Também pode usar none (representando canal de transparência nulo). O valor padrão é 100%.

Também pode usar None (equivalente a 0%).

Sintaxe de valor relativo from Esta é a cor original baseada na cor relativa. Opcional. Também pode usar none (equivalente a 0%). b / Aoklab(from
) Valor
Descrição from

color

Começa com a palavra-chave from, seguida do valor da cor que representa a cor original.
Esta é a cor original baseada na cor relativa.

L

Obrigatório. Define a luminosidade percebida da cor, que pode ser um número entre 0 e 1 ou uma porcentagem entre 0% e 100%.

0 (ou 0%) representa preto, 1 (ou 100%) representa branco.
Opcional. Também pode usar none (equivalente a 0%).

Obrigatório. Define um número entre -0.4 e 0.4 ou uma porcentagem entre -100% e 100%.

Define a distância da cor ao longo do eixo a, representando o grau de vermelho-verde da cor.

-0.4 representa verde, 0.4 representa vermelho. Também pode usar none (equivalente a 0%).
b

Obrigatório. Define um número entre -0.4 e 0.4 ou uma porcentagem entre -100% e 100%.

Define a distância da cor ao longo do eixo b, representando o grau de amarelo-azul da cor.

-0.4 representa azul, 0.4 representa amarelo. Também pode usar none (equivalente a 0%).
/ A

Opcional. Representa o valor do canal de transparência da cor (0% ou 0 representa completa transparência, 100% ou 100 representa completa opacidade).

Também pode usar none (representando canal de transparência nulo). O valor padrão é 100%.

Detalhes técnicos

Versão: CSS Color Module Level 4

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente a função pela primeira vez.

Chrome Edge Firefox Safari Opera
oklab()
111 111 113 15.4 97
Uso misto de números e porcentagens nos parâmetros
116 116 113 16.2 102

Páginas relacionadas

Referência:Cores CSS

Referência:Função hsl() do CSS

Referência:Função hwb() do CSS

Referência:Função lch() do CSS

Referência:Função lab() do CSS

Referência:Função oklch() do CSS