Conversor HEX para RGB e HSL
As cores na web podem ser expressas em três formatos comuns: HEX (hexadecimal), RGB (Vermelho Verde Azul) e HSL (Matiz Saturação Luminosidade). Um código HEX como #1A2B3C contém a mesma informação que rgb(26, 43, 60) ou hsl(210, 40%, 27%) — esta ferramenta converte entre os três formatos instantaneamente enquanto você digita, sem necessidade de cálculos manuais.
HEX e RGB são representações de baixo nível que mapeiam diretamente para intensidades de canal de hardware (0–255 por canal). O HSL é uma alternativa mais intuitiva: ajustar a Saturação ou a Luminosidade produz resultados previsíveis alinhados com a forma como designers pensam em cor, tornando-o ideal para temas e trabalho de acessibilidade.
Como funciona
HEX → RGB: divida os 6 dígitos hexadecimais em três pares (RR, GG, BB) e converta cada um de base-16 para decimal (0–255). RGB → HEX: inverta o processo. RGB → HSL: normalize os canais para [0,1]; L = (max+min)/2; S = (max−min)/(1−|2L−1|); H é derivado do canal de maior valor. HSL → RGB: use a fórmula f(n) = L − a·max(−1, min(k−3, 9−k, 1)) onde k=(n+H/30) mod 12 e a=S·min(L, 1−L).
Casos de uso
- Converter códigos de cor de ferramentas de design (HEX) em propriedades CSS personalizadas (RGB ou HSL)
- Ajustar luminosidade ou saturação em HSL para gerar paletas de cores acessíveis
- Traduzir valores HEX fornecidos por designers para rgba() em efeitos de opacidade CSS
- Verificar consistência de cores entre materiais impressos (RGB) e digitais (HEX)
- Aprender teoria das cores explorando como os componentes HSL se relacionam com a cor percebida