Resultado
Esta página não tem lado servidor nenhum. A tabela colada é processada por JavaScript dentro do seu próprio navegador, o gráfico é desenhado num elemento canvas da sua máquina e o arquivo de exportação é montado localmente. Nada é enviado, armazenado ou gravado em qualquer log. Você pode desconectar a rede depois que a página carregar e tudo continuará funcionando — é a forma mais simples de verificar você mesmo.
Fatos e limites do método
| Matiz (H) | De 0 a 360 graus — posição no círculo cromático |
|---|---|
| Saturação (S) | De 0% (cinza) a 100% (cor pura) |
| Luminosidade (L) | De 0% (preto) a 100% (branco), 50% é a cor "pura" sem preto ou branco misturado |
| Arredondamento | Os três valores são arredondados para números inteiros |
Quando induz ao erro
- A conversão HEX → HSL é uma fórmula matemática exata sem perda de informação: converter de volta HSL → HEX a partir desses mesmos valores arredondados pode produzir um código HEX que difere em 1 unidade em algum canal devido ao arredondamento acumulado de números intermediários.
- Para cores puramente cinzas (R=G=B), o matiz não é matematicamente definido (a saturação é zero, e qualquer valor de matiz parece visualmente o mesmo cinza) — o conversor mostra um matiz de 0° nesse caso, o que é uma convenção técnica, não um erro.
- Os três valores são arredondados para números inteiros para facilitar a leitura — se for necessária maior precisão (por exemplo, para reprodução exata em um sistema de design), use diretamente os valores intermediários não inteiros da fórmula matemática.
- Assim como RGB e HEX, HSL não carrega informação de perfil de cor — é apenas outra forma de descrever os mesmos números, não um espaço de cor diferente com precisão perceptual distinta.
Como é calculado
O código HEX é convertido primeiro para RGB comum (três números de 0 a 255), como no conversor de HEX para RGB.
Os valores RGB são normalizados para a faixa de 0 a 1 (divididos por 255). A luminosidade é a média entre o canal máximo e o mínimo.
Se os canais máximo e mínimo forem iguais (a cor é cinza), a saturação e o matiz são zero. Caso contrário, a saturação é calculada a partir da diferença entre o máximo e o mínimo em relação à luminosidade, e o matiz é calculado com base em qual dos três canais (R, G ou B) é o máximo.
As frações resultantes de matiz, saturação e luminosidade são convertidas em graus (0–360) e porcentagem (0–100) e arredondadas para números inteiros.
Perguntas e respostas
Por que uma cor cinza mostra matiz 0°?
Para uma cor completamente cinza (onde R=G=B), o matiz não é matematicamente definido porque a saturação é zero — qualquer valor de matiz parece igual com saturação zero. 0° é apenas uma convenção, não um valor com significado.
O que significa uma luminosidade de 50%?
É a cor "pura" daquele matiz e saturação, sem preto (mais próximo de 0%) ou branco (mais próximo de 100%) misturado.
HSL é mais preciso que HEX?
Não, é apenas outra forma de escrever a mesma cor — ambos os formatos descrevem o mesmo ponto no espaço de cor, apenas com coordenadas diferentes.
Meus dados são enviados para algum lugar?
Não, todo o cálculo roda no seu navegador.