Três Notações, Uma Cor
Escolha uma cor visualmente ou escreva um código HEX, e a ferramenta mostra as três notações CSS lado a lado — clique em qualquer valor para o copiar. Descrevem exatamente a mesma cor, apenas em sistemas de coordenadas diferentes:
| Formato | Exemplo | O que os números significam |
|---|---|---|
| HEX | #7c5cfc | Vermelho, verde, azul como pares hex, 00–ff |
| RGB | rgb(124, 92, 252) | Os mesmos três canais em decimal, 0–255 |
| HSL | hsl(252, 96%, 67%) | Matiz na roda de cores (0–360°), saturação, luminosidade |
Exemplo Prático: Ler #7c5cfc
De HEX para RGB é conversão de base direta: 7c = 7×16+12 = 124 vermelho, 5c = 92 verde, fc = 252 azul. O azul é o canal mais forte com algum vermelho à mistura, por isso a cor cai na gama violeta — o HSL confirma-o: a matiz 252° situa-se entre o azul (240°) e o magenta (300°), a saturação 96% significa que é quase pura, e a luminosidade 67% coloca-a no lado pálido do ponto médio. HEX e RGB são notações intermutáveis dos mesmos valores; o HSL é um verdadeiro remapeamento, e é por isso que os seus valores parecem não relacionados à primeira vista.
Que Formato Quando
- HEX é o padrão compacto para CSS, entregas de design e guias de marca — fácil de copiar, difícil de escrever mal.
- RGB corresponde ao modo como ecrãs e APIs gráficas realmente funcionam, e estende-se naturalmente à transparência como
rgba(). - HSL é o formato para ajustar cores: precisa de um estado de rato por cima? Mantenha a matiz e a saturação, baixe a luminosidade em 10%. Precisa de um acento complementar? Rode a matiz em 180°. Fazer essa matemática em HEX é penoso; em HSL é um só número.
Um fluxo de trabalho prático: escolha a cor da sua marca com o seletor visual, copie o valor HSL e derive a sua paleta (rato por cima, contornos, fundos) variando apenas a luminosidade — os tons ficam automaticamente relacionados a nível visual.
Regras de Entrada e Privacidade
O campo de texto aceita códigos HEX completos de seis dígitos com um # à frente (a forma abreviada como #fff deve ser expandida para #ffffff). O seletor atualiza todos os formatos ao vivo, e os valores HSL são arredondados a números inteiros — converter de volta pode desviar um valor em ±1, o que é invisível no ecrã. Toda a conversão corre inteiramente no seu navegador; nada é enviado para um servidor.