Como Converter Cores HEX para RGB e Vice-Versa
Aprenda como converter cores entre os formatos HEX, RGB e HSL. Entenda as fórmulas matemáticas e como usar as cores corretamente no seu código.
No mundo do web design e desenvolvimento, as cores são a alma da interface. No entanto, diferentes ferramentas e linguagens exigem diferentes formatos para representar a mesma cor. Enquanto o CSS costuma usar HEX ou RGB, ferramentas de design como Figma podem preferir HSL.
Neste guia, você aprenderá a lógica por trás da conversão de cores e como transitar entre esses formatos de forma precisa e rápida.
Entendendo a Conversão HEX para RGB
O código HEX (Hexadecimal) é uma representação na base 16. Ele é composto por três pares de caracteres, onde cada par representa a intensidade de Vermelho (Red), Verde (Green) e Azul (Blue).
Para converter HEX em RGB, pegamos cada par e o convertemos para a base 10 (decimal). Por exemplo, o valor "FF" em hex é igual a 255 em decimal.
- HEX: #FFFFFF -> RGB: 255, 255, 255
- HEX: #000000 -> RGB: 0, 0, 0
- Cada canal (R, G, B) varia de 0 a 255
- O símbolo # é opcional na maioria dos conversores mas obrigatório no CSS
Como Converter RGB para HEX
Para fazer o caminho inverso, dividimos o valor decimal por 16. O quociente e o resto da divisão formam o par hexadecimal. É um processo matemático simples, mas que exige atenção aos valores acima de 9 (onde usamos A, B, C, D, E, F).
O Formato HSL: Uma Abordagem Mais Humana
Muitos designers preferem o HSL (Hue, Saturation, Lightness - Matiz, Saturação e Luminosidade) porque ele é mais intuitivo. É muito mais fácil clarear uma cor alterando a porcentagem de "Lightness" do que tentando adivinhar novos valores HEX.
Converter RGB para HSL envolve cálculos de trigonometria e frações, sendo quase impossível de fazer manualmente com rapidez. Por isso, o uso de um conversor digital é essencial.
Cores no CSS Moderno
O CSS moderno agora suporta novos espaços de cor como OKLCH e LCH, mas o trio HEX/RGB/HSL continua sendo o padrão da indústria pela sua compatibilidade total com navegadores antigos.
- Use HEX para cores fixas e simples
- Use RGB quando precisar de opacidade (rgba)
- Use HSL para criar paletas dinâmicas e variantes de sombras
- Sempre teste o contraste das cores para acessibilidade
Conclusão
Dominar a conversão de cores permite que você trabalhe de forma mais fluida entre softwares de design e código. Não importa o formato que você recebeu, o importante é saber como aplicá-lo.
Use nosso Conversor de Cores Online para obter resultados imediatos em todos os formatos principais ao mesmo tempo.