Função lch() do CSS

Definição e uso do CSS

Definição e uso do CSS lch() A função define cores no espaço de cor LCH (Brilho-Cor-Tonalidade).

exemplos

Definir diferentes lch() Cor:

#p1 {background-color:lch(10% 100 130 / 0.5);}
#p2 {background-color:lch(40% 100 130);}
#p3 {background-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);}

Experimente pessoalmente

Sintaxe do CSS

Sintaxe de valor absolutoIsto é a cor original baseada na cor relativa. C H / Alch(from
) Valor
Isto é a cor original baseada na cor relativa.

Obrigatório. Define a brilho da cor, pode ser um número ou uma porcentagem entre 0 e 100.

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

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

lch(

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

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

Obrigatório. Define o ângulo de tom da cor, pode ser um valor numérico ou um valor de ângulo.

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%.

O valor mínimo é 0 (ou 0%). O valor máximo não tem limite (na verdade não ultrapassa 230). 100% é igual a 150.

Sintaxe de valor relativo from Isto é a cor original baseada na cor relativa. C H / Alch(from
) Valor
Descrição from

color

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

Obrigatório. Define a brilho da cor, pode ser um número ou uma porcentagem entre 0 e 100.

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

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

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

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

-125 representa verde, 125 representa vermelho.

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

Obrigatório. Define o ângulo de tom da cor, pode ser um valor numérico ou um valor de ângulo.

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: Módulo de Cor do CSS Nível 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
lch()
111 111 113 15 97
Mistura 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 oklab() do CSS

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