Comparador de Brilho de Cor (HSL vs Lab L* vs WCAG vs HSP)
Cor
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.
Como usar
- Escolha uma cor única e leia sete métricas de brilho com barras horizontais dimensionadas ao valor da métrica.
- 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.
- Clique num exemplo para carregar um par deliberadamente complicado (amarelo vs azul com mesma L HSL, vermelho vs verde com mesma V HSV, etc.).
- 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.
Ferramentas relacionadas
Simulador de Daltonismo
Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).
Gerador de CSS Box Shadow
Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.
Conversor de Formatos de Cor
Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.
Gerador de Paleta de Cores
Crie paletas harmoniosas a partir de uma cor base em seis esquemas.
Verificador de Contraste de Cor
Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.