Ir para o conteúdo
AZ Tools

Comparador de Brilho de Cor (HSL vs Lab L* vs WCAG vs HSP)

Toda ferramenta de UI que fala em 'luminosidade' ou 'brilho' de cor quer dizer algo diferente. L de HSL é o ponto médio entre os canais RGB mais escuro e mais claro — amarelo puro #ffff00 e azul puro #0000ff ambos pontuam L=50% embora um seja ofuscantemente brilhante e o outro quase preto na tela. V de HSV é pior: retorna o canal máximo, então vermelho, verde e azul puros todos atingem V=100%. Y WCAG (luminância relativa) é o que o algoritmo de razão de contraste usa — gama-decodifica sRGB para luz linear e pondera por sensibilidade fotópica (0.2126 R + 0.7152 G + 0.0722 B), então amarelo é genuinamente brilhante e azul é genuinamente escuro. L* CIE Lab pega essa luminância física e remapeia através de uma curva perceptual de raiz cúbica para que passos iguais de L* pareçam iguais ao observador humano. Luma Rec. 709 é a aproximação de televisão broadcast (gama-codificada, mesmos pesos que WCAG). HSP é o ajuste psicofísico de Darel Rex Finley. Esta ferramenta mostra todos os sete para uma cor ou par e deixa você ver como os rankings divergem.

—
Métricas de brilho
HSL Lightness (L)
59.8
(max RGB + min RGB) / 2. Amarelo puro e azul puro ambos pontuam 50%. Nada perceptual.
HSV Value (V)
96.5
Canal RGB máximo. Vermelho, verde e azul puros atingem 100%. Ainda menos perceptual que L HSL.
WCAG Relative Luminance (Y · LRV)
23.5
Luminância linear gama-decodificada: 0.2126 R + 0.7152 G + 0.0722 B. Usada pelos ratios de contraste WCAG. Igual ao Valor de Refletância Luminosa (LRV) × 100.
CIE Lab L* (perceptual lightness)
55.6
CIE 1976 L* — claridade perceptualmente uniforme. Passos iguais de L* parecem iguais a um observador humano. Y = 18% → L* = 50.
Rec. 709 Luma (Y′)
48.3
Luma Rec. 709 (Y′) sobre sRGB gama-codificado. Aproximação de televisão broadcast; entre L HSL e Y WCAG.
HSP Perceived Brightness
52.4
HSP de Darel Rex Finley: √(0.299R² + 0.587G² + 0.114B²). Melhor que média ingênua, mais rápido que CIE Lab.
Naïve (R+G+B)/3
56.9
(R + G + B) / 3. Trata verde igual ao azul. Incluído só como linha de base de aviso.
Leia isto
Se as métricas discordam muito — especialmente L HSL vs L* Lab / Y WCAG — sua escolha de cor vai surpreender usuários. Confie em L* Lab (ou L OKLCH) para decisões perceptuais, Y WCAG para acessibilidade.
Pares complicados

Como usar

  1. Escolha uma cor única e leia sete métricas de brilho com barras horizontais dimensionadas ao valor da métrica.
  2. Mude para modo Par para colocar uma segunda cor e ver o delta em cada métrica — útil para diagnosticar por que uma paleta parece irregular.
  3. Clique num exemplo para carregar um par deliberadamente complicado (amarelo vs azul com mesma L HSL, vermelho vs verde com mesma V HSV, etc.).
  4. Copie o relatório para compartilhar ou colar numa revisão de design.

Perguntas frequentes

Qual métrica devo realmente usar?
Depende da pergunta. Para contraste de acessibilidade → Y WCAG / LRV (usada pela fórmula de razão de contraste). Para paletas ou gradientes perceptualmente uniformes → L* CIE Lab ou L OKLCH. Para vídeo broadcast → Luma Rec. 709. L HSL e V HSV são alças convenientes para seletores de cor mas dizem quase nada sobre quão brilhante uma cor parece. Nunca use (R+G+B)/3 — só está incluído para mostrar quão mal classifica cores.
Por que amarelo e azul têm ambos L HSL = 50%?
HSL é definido como L = (max RGB + min RGB) / 2. Amarelo puro #ffff00 tem canais (255, 255, 0) → (255 + 0) / 2 = 50%. Azul puro #0000ff tem (0, 0, 255) → (255 + 0) / 2 = 50%. HSL ignora completamente que olhos humanos são ~10× mais sensíveis ao verde e amarelo que ao azul. É uma construção geométrica sobre o cubo RGB, não um modelo perceptual.
Qual a diferença entre Y WCAG e L* Lab?
Y WCAG é luminância fotópica — o que um fotômetro calibrado mediria apontando ao pixel renderizado, normalizado 0–1 (frequentemente reportado como LRV × 100 em arquitetura). L* Lab é essa luminância passada por L* = 116 × f(Y/Yn) − 16, onde f é função de raiz cúbica ajustada à percepção. Então Y = 50% cai em L* ≈ 76 (muito mais perto do branco que do preto perceptualmente), e Y = 18% cai em L* = 50 (cinza médio).
O que é HSP e por que incluí-lo?
HSP (Tom/Saturação/Brilho-Percebido) é um modelo de Darel Rex Finley que ajusta brilho percebido como P = √(0.299R² + 0.587G² + 0.114B²) sobre RGB gama-codificado. Mesmos pesos Rec. 601 do Y′ clássico mas com RMS euclidiano em vez de média aritmética. Não é padronizado mas é popular quando você quer melhor-que-ingênuo sem fazer conversão completa sRGB→Lab.

Guias sobre este tema

Ferramentas relacionadas

Calculadora de ponto de orvalho e umidade

Calcule o ponto de orvalho e a umidade absoluta a partir da temperatura e da umidade relativa com a fórmula de Magnus, com uma avaliação de conforto em °C ou °F.

Dia a dia 0 0

Verificador de Contraste de Cor

Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.

Cor 0 0

Misturador de Cores

Interpole entre duas cores em RGB, HSL ou CIELAB. Veja uma faixa de gradiente com passos intermediários.

Cor 0 0

Pré-visualização de CSS color-mix()

Compare como a função moderna CSS color-mix() mistura duas cores em diferentes espaços de interpolação (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — amostras ao vivo, hex computado, faixa de gradiente completa por espaço e CSS copiável.

Cor 0 0

Conversor de Formatos de Cor

Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.

Cor 0 0

Seletor de Cor HSL

Arraste sliders de matiz, saturação, luminosidade e alpha pra escolher cor — copie HEX, RGB, HSL ou valor arbitrário Tailwind.

Cor 0 0