Como Converter Cores entre HEX, RGB e HSL
Trabalhar com cores na web significa lidar com vários formatos que descrevem exatamente a mesma tonalidade de maneiras diferentes. Um designer pode entregar uma paleta em códigos HEX, uma folha de estilos pode usar valores RGB e um programador pode preferir HSL para ajustar rapidamente a luminosidade de um botão. Saber converter entre estes três sistemas é uma competência do dia a dia de quem cria interfaces.
Este conversor traduz instantaneamente uma cor entre os formatos HEX, RGB e HSL, mostrando também uma pré-visualização em tempo real. Basta introduzir um código HEX ou os valores de vermelho, verde e azul, e obtém de imediato todas as representações equivalentes.
O Modelo HEX
O código hexadecimal é a forma mais comum de representar cores na web. Consiste num cardinal seguido de seis dígitos, como #6366F1. Esses seis dígitos dividem-se em três pares: os dois primeiros representam a quantidade de vermelho, os dois seguintes o verde e os últimos o azul. Cada par varia de 00 a FF em notação hexadecimal, o que corresponde a valores de 0 a 255 em decimal.
O sistema hexadecimal usa dezasseis símbolos: os algarismos de 0 a 9 e as letras de A a F. Por isso, FF representa o valor máximo (255) e 00 o mínimo (0). Quando os dois dígitos de cada par são iguais, é possível abreviar o código para apenas três dígitos, transformando #FF6633 em #F63.
O Modelo RGB
O modelo RGB descreve uma cor a partir das suas três componentes aditivas: vermelho (Red), verde (Green) e azul (Blue). Cada componente assume um valor inteiro de 0 a 255, em que 0 significa ausência dessa cor e 255 a sua intensidade máxima. A combinação das três componentes produz o espetro completo de cores que um ecrã consegue mostrar.
Este é um modelo aditivo porque parte do preto (ausência de luz) e vai somando luz de cada canal. Quando os três canais estão no máximo, obtém-se o branco. O RGB é particularmente prático quando se manipulam cores por código, pois cada canal é apenas um número que se pode incrementar ou reduzir com facilidade.
O Modelo HSL
O HSL aborda a cor de um ângulo mais humano e intuitivo. Em vez de misturar canais de luz, descreve a cor por três atributos percetivos: matiz, saturação e luminosidade.
A matiz (hue) indica a tonalidade base e mede-se em graus de 0 a 360, correspondendo a uma volta completa na roda de cores. O vermelho fica perto dos 0 graus, o verde perto dos 120 e o azul perto dos 240. A saturação (saturation) exprime, em percentagem, a intensidade da cor: 0% resulta num cinzento e 100% na cor mais pura possível. A luminosidade (lightness) controla a quantidade de luz, também em percentagem: 0% é preto, 100% é branco e 50% corresponde à cor em pleno vigor.
A grande vantagem do HSL é a facilidade de ajuste. Para escurecer uma cor, basta reduzir a luminosidade; para a tornar mais viva, aumenta-se a saturação, sem alterar a tonalidade base.
Exemplo Prático
Imagine que recebeu de um designer a cor de destaque de uma marca no código HEX #6366F1. Ao introduzi-lo no conversor, obtém a representação RGB rgb(99, 102, 241) e a representação HSL hsl(239, 84%, 67%).
A partir daqui, o ajuste torna-se simples. Se quiser uma variante mais escura para o estado de rato sobre um botão, mantém a matiz nos 239 graus e a saturação nos 84%, mas reduz a luminosidade de 67% para, digamos, 55%. Obtém assim uma versão coerente da mesma cor, ideal para estados de interação. Este tipo de raciocínio é muito mais direto em HSL do que tentar recalcular manualmente os canais RGB ou os dígitos hexadecimais.
Quando Usar Cada Formato
Não existe um formato universalmente melhor; cada um brilha num contexto. O HEX é compacto e omnipresente em ferramentas de design e paletas, sendo perfeito para copiar e colar um valor fixo. O RGB é conveniente quando se trabalha com transparência através de rgba, ou quando se manipulam canais individualmente por programação. O HSL é a escolha natural quando se pretende gerar variações sistemáticas de uma cor, criar temas ou ajustar luminosidade e saturação de forma previsível.
No CSS moderno, os três formatos são aceites de forma nativa, pelo que a decisão depende sobretudo da legibilidade e da manutenção do código. Muitas equipas adotam o HSL nas suas variáveis de tema precisamente porque facilita a criação de escalas de cor consistentes.
Conclusão
Compreender e converter entre HEX, RGB e HSL liberta-o para trabalhar com cores no formato mais adequado a cada tarefa. O HEX serve para partilhar valores fixos, o RGB para manipular canais e transparências, e o HSL para ajustar tonalidades de forma intuitiva. Use este conversor sempre que precisar de traduzir uma cor rapidamente e mantenha os seus projetos visualmente coerentes, do protótipo à folha de estilos final.