Função oklch() no CSS

Definição e uso

Definição e uso no CSS oklch() A função é usada para especificar cores no espaço de cor OKLCH.

oklch() A função é muito intuitiva: você precisa considerar a quantidade de brilho / claridade (L) a ser usada, a intensidade do tom (cinza) (C), e a cor em si (H). Além disso, você pode optar por adicionar um valor de canal de transparência (A), que representa a opacidade da cor.

Exemplos

Definir diferentes oklch() Cor:

/* Diferentes níveis de brilho verdes /
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ Amarelo de diferentes brilhos /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ Vermelho de diferentes brilhos */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

Experimente você mesmo

Sintaxe do CSS

Sintaxe de valor absoluto

oklch(L C H / A)
Valor Descrição
L

Obrigatório. Define a luminosidade percebida da cor (0 a 1 número ou 0% a 100% porcentagem).

0 (ou 0%) representa preto, 1 (ou 100%) representa branco.

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

Obrigatório. Define o tom da cor (quantidade da cor), pode ser número ou porcentagem.

Deve ser número entre -0.4 e 0.4 ou porcentagem entre -100% e 100%.

No mínimo (0% ou -0.4), a cor está mais perto do cinza.

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

Obrigatório. Define a cor em si, pode ser número ou ângulo (de 0 a 360).

Também pode usar none (equivalente a 0deg).
/ A

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

Também pode usar none (representa canal de transparência nulo).

O valor padrão é 100%.

Sintaxe de valor relativo

oklch(from color L C H / A)
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 (0 a 1 número ou 0% a 100% porcentagem).

0 (ou 0%) representa preto, 1 (ou 100%) representa branco.

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

Obrigatório. Define o tom da cor (quantidade da cor), pode ser número ou porcentagem.

Deve ser número entre -0.4 e 0.4 ou porcentagem entre -100% e 100%.

No mínimo (0% ou -0.4), a cor está mais perto do cinza.

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

Obrigatório. Define a cor em si, pode ser número ou ângulo (de 0 a 360).

Também pode usar none (equivalente a 0deg).
/ A

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

Também pode usar none (representa 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
oklch()
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 lab() do CSS

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

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