Função lab() do CSS

Definição e uso

Definição e uso do CSS lab() A função define cores no espaço de cor CIE Lab. Este espaço representa todas as cores visíveis pelo olho humano.

exemplos

Definir diferentes lab() Cor:

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

Experimente você mesmo

Sintaxe do CSS

Sintaxe absoluta

lab(L a b / A)
Valor Descrição
L

Obrigatório. Define a luminosidade da cor, que pode ser um número ou percentual entre 0 e 100.

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

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

Obrigatório. Define um número entre -125 e 125 ou um percentual 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%).
b

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

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

-125 representa azul, 125 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 completamente transparente, 100% ou 100 representa completamente opaco).

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

O valor padrão é 100%.

Sintaxe de valor relativo

lab(from color L a b / 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 da cor, que pode ser um número ou percentual entre 0 e 100.

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

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

Obrigatório. Define um número entre -125 e 125 ou um percentual 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%).
b

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

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

-125 representa azul, 125 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 completamente transparente, 100% ou 100 representa completamente opaco).

Também pode usar none (representando 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 essa função pela primeira vez.

Chrome Edge Firefox Safari Opera
lab()
111 111 113 15 97
Misturar 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:A função CSS hwb()

Referência:A função CSS lch()

Referência:A função CSS oklab()

Referência:A função CSS oklch()