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
Perguntas frequentes
Como converter um código de cor HEX para RGB?
Divida os seis dígitos hexadecimais em três pares — vermelho, verde e azul — e converta cada par de base-16 para um número decimal entre 0 e 255. Por exemplo, #1A2B3C vira rgb(26, 43, 60), porque 1A é 26, 2B é 43 e 3C é 60 em decimal. Este conversor faz o cálculo automaticamente enquanto você digita.
Qual é a diferença entre RGB e HSL?
O RGB descreve uma cor pela intensidade dos canais vermelho, verde e azul (0–255 cada), o que corresponde diretamente à forma como as telas produzem cor. O HSL descreve a mesma cor por matiz, saturação e luminosidade, que é como designers pensam — deixar uma cor mais clara ou menos saturada é um ajuste único e previsível. Os dois formatos representam exatamente as mesmas cores, apenas em sistemas de coordenadas diferentes.
Por que alguns códigos HEX têm 3 dígitos em vez de 6?
Um código HEX de 3 dígitos é uma forma abreviada em que cada dígito é duplicado: #F80 expande para #FF8800. Ele só funciona quando cada canal de cor tem dois dígitos hexadecimais idênticos, cobrindo um subconjunto menor de cores. Os navegadores aceitam as duas formas no CSS.
Como adicionar transparência a uma cor HEX no CSS?
Você pode usar a notação HEX de 8 dígitos, em que os dois últimos dígitos são o canal alfa (por exemplo, #1A2B3C80 equivale a cerca de 50% de opacidade), ou converter para rgba(), como rgba(26, 43, 60, 0.5). Converter o HEX para RGB primeiro facilita montar a forma rgba(). Navegadores modernos suportam as duas abordagens.
Qual formato de cor devo usar no CSS?
Os três formatos produzem resultados idênticos, então a escolha depende do fluxo de trabalho. O HEX é compacto e comum em entregas de ferramentas de design, o RGB é conveniente quando você precisa de transparência alfa, e o HSL é o melhor para criar sistemas de cores e temas, pois permite derivar variantes mais claras ou escuras alterando um único valor.