HEX, RGB e HSL: entenda de vez os códigos de cor

Por que existem tantos formatos de cor

Se você já mexeu com design, site ou edição de imagem, esbarrou em códigos como #FF5733, rgb(255, 87, 51) e hsl(11, 100%, 60%). Os três descrevem exatamente a mesma cor — um laranja avermelhado. O que muda é a forma de descrever.

Cada formato foi criado com um propósito diferente. RGB descreve como a tela produz a cor. HEX é a mesma informação escrita de forma compacta. HSL descreve como o olho humano percebe a cor. Entender essa diferença é o que permite escolher o formato certo para cada tarefa.

RGB: como a tela produz cor

Toda tela — celular, monitor, TV — forma imagem misturando três luzes: vermelha, verde e azul. RGB significa exatamente isso: Red, Green, Blue.

Cada canal recebe um valor de 0 a 255, onde 0 é a luz apagada e 255 é a luz no máximo. Como são três canais com 256 níveis cada, o total de cores possíveis é 256 × 256 × 256 = 16.777.216. É daí que vem o famoso "16 milhões de cores".

Alguns valores de referência:

Repare que amarelo é vermelho + verde. Isso confunde quem está acostumado com tinta, onde amarelo é uma cor primária. A diferença é que tinta funciona por subtração de luz (o pigmento absorve parte do espectro) e a tela funciona por adição (as luzes se somam). São dois sistemas opostos.

HEX: RGB em hexadecimal

O código hexadecimal é a mesma informação do RGB, escrita na base 16 em vez da base 10.

Em #FF5733:

• FF é o vermelho
• 57 é o verde
• 33 é o azul

Cada par de caracteres representa um número de 0 a 255. Em hexadecimal, os dígitos vão de 0 a 9 e depois seguem com A, B, C, D, E, F, representando 10 a 15. Assim, FF = 15×16 + 15 = 255, e 57 = 5×16 + 7 = 87.

Ou seja, #FF5733 é exatamente rgb(255, 87, 51).

Por que usar hexadecimal

Duas razões práticas. Primeiro, compactação: sete caracteres contra até dezoito. Segundo, alinhamento: cada canal ocupa exatamente dois dígitos, sempre, o que torna o código fácil de ler e de manipular por programas. Se quiser entender melhor a matemática por trás disso, o conversor de base numérica mostra a conversão entre decimal e hexadecimal passo a passo.

A forma abreviada

Quando os dois dígitos de cada par são iguais, o código pode ser abreviado para três caracteres:

• #FFFFFF vira #FFF (branco)
• #000000 vira #000 (preto)
• #FF0000 vira #F00 (vermelho)
• #3366CC vira #36C

A abreviação só funciona nesse caso específico. #FF5733 não tem forma curta.

Transparência: os 8 dígitos

Existe também a variante de oito dígitos, onde o último par indica a opacidade. Em #FF5733CC, o CC (204 em decimal) corresponde a cerca de 80% de opacidade. Alguns valores úteis:

HSL: como o olho percebe cor

HSL significa Hue, Saturation, Lightness — matiz, saturação e luminosidade. É o formato mais próximo de como as pessoas realmente pensam sobre cor.

• Matiz (0 a 360°) é a cor em si, medida como um ângulo num círculo cromático. 0° é vermelho, 120° é verde, 240° é azul, e o círculo fecha de volta em 360°.
• Saturação (0 a 100%) é a intensidade. Em 0% a cor vira cinza; em 100% ela é o mais viva possível.
• Luminosidade (0 a 100%) vai do preto (0%) ao branco (100%), passando pela cor pura em 50%.

Nosso laranja #FF5733 em HSL é hsl(11, 100%, 60%): matiz 11° (bem próximo do vermelho), saturação máxima, luminosidade um pouco acima do meio.

Por que HSL é tão prático

Porque permite ajustes intuitivos. Quer a mesma cor mais clara? Aumente só a luminosidade. Quer uma versão dessaturada para um estado desabilitado? Reduza só a saturação. Quer a cor complementar? Some 180 ao matiz.

Fazer isso em HEX exige recalcular três valores sem uma relação óbvia entre eles. Em HSL, é mexer num número só.

Construindo paletas com HSL

O matiz como ângulo abre atalhos para composições clássicas:

• Complementar: matiz + 180°
• Análogas: matiz ± 30°
• Tríade: matiz, +120° e +240°
• Tétrade: matiz, +90°, +180° e +270°

Partindo de hsl(11, 100%, 60%), a complementar é hsl(191, 100%, 60%) — um azul-ciano. O conversor de cores mostra os três formatos ao mesmo tempo, o que facilita testar essas variações.

Convertendo entre os formatos

HEX para RGB

Separe em três pares e converta cada um de hexadecimal para decimal.

#2ECC71 → 2E, CC, 71 → 46, 204, 113 → rgb(46, 204, 113)

Para converter um par na mão: multiplique o primeiro dígito por 16 e some o segundo. CC = 12×16 + 12 = 204.

RGB para HEX

Converta cada canal para hexadecimal e junte, sempre com dois dígitos.

rgb(46, 204, 113) → 46 é 2E, 204 é CC, 113 é 71 → #2ECC71

O detalhe fácil de errar é o zero à esquerda: 9 vira 09, não 9.

RGB para HSL

A conta é mais longa. Em resumo: normalize os três canais para a faixa de 0 a 1, identifique o maior e o menor valor, e derive luminosidade da média entre eles, saturação da diferença, e matiz de qual canal ficou no topo. Na prática ninguém faz isso à mão — é o tipo de conversão que vale deixar para uma ferramenta.

Qual formato usar

Cores em impressão são outra história

Vale um aviso: tudo neste guia trata de cor em tela, no espaço RGB. Impressão usa CMYK — ciano, magenta, amarelo e preto —, um sistema subtrativo com um alcance de cores menor. Cores muito vibrantes na tela, especialmente verdes e azuis saturados, simplesmente não existem em CMYK e saem mais opacas na impressão.

Se o material vai para gráfica, converta a paleta para CMYK e confira uma prova impressa antes de aprovar. Nunca julgue cor de impressão pela tela.

Acessibilidade: contraste importa mais que beleza

Ao escolher cores para texto, o contraste entre o texto e o fundo precisa ser suficiente para quem tem baixa visão. As diretrizes internacionais de acessibilidade pedem razão mínima de 4,5:1 para texto normal e 3:1 para texto grande.

Uma pista rápida em HSL: se a diferença de luminosidade entre texto e fundo for pequena, o contraste provavelmente é insuficiente, por mais distintos que os matizes pareçam. Amarelo sobre branco é o exemplo clássico — cores bem diferentes, contraste péssimo.

Perguntas frequentes

#FF5733 e #ff5733 são a mesma cor? Sim. Maiúsculas e minúsculas são equivalentes em hexadecimal. Escolha um padrão e mantenha por consistência.

Por que a mesma cor parece diferente em telas diferentes? Porque cada tela tem calibração, brilho e gama de cores próprios. Para trabalhos que dependem de fidelidade, é preciso calibrar o monitor.

Existe cor que não pode ser representada em RGB? Sim. O olho humano enxerga cores fora do alcance do RGB de 8 bits, especialmente em verdes saturados. Espaços de cor mais amplos existem para esses casos.

Qual a diferença entre HSL e HSV/HSB? São primos. HSL usa luminosidade, onde 100% é sempre branco. HSV/HSB usa valor ou brilho, onde 100% é a cor pura. Editores de imagem costumam usar HSV; a web usa HSL.