HEX vs RGB vs HSL

Um gamute, três notações

O sRGB é o espaço de cores padrão da web: o espectro que uma tela típica mostra, definido para que todo navegador, de um celular a um monitor de estúdio calibrado, queira dizer a mesma cor com os mesmos números. Cada canal vai de 0 a 255, e é por isso que 16,777,216 cores (256 ao cubo) costumavam ser citadas como o tamanho da paleta da web. Uma notação é apenas uma interface de usuário para esses três números — e para o alfa, um quarto número que controla a opacidade.

Como as três notações resolvem para os mesmos canais, a conversão entre elas é aritmética exata, nunca aproximação. Uma ferramenta que reporta #FF6600 como hsl(24, 100%, 50%) não está oferecendo uma opinião; está fazendo a mesma álgebra que a especificação do CSS define. É também por isso que o formato em que você escreve tem efeito zero na renderização — trata-se puramente do humano que edita a linha.

HEX: compacto, portátil, opaco

Um código HEX de seis dígitos são três bytes em hexadecimal: FF é 255, 66 é 102, 00 é zero. A forma data do HTML mais primitivo e sobrevive porque é imbatível como identificador — curta, inequívoca, sem aspas. Se os dois dígitos de cada canal são iguais (FF, 66, 00), o CSS também aceita três dígitos: #F60. Desde o CSS Color 4, acrescentar dois dígitos a mais adiciona alfa: #FF6600AA é o mesmo laranja com cerca de 67% de opacidade.

A fraqueza do HEX é a composição. Olhe para #FF6600 e pergunte como ele ficará 15% mais escuro, ou qual é o seu complementar, e a resposta exige decodificar hexadecimal na cabeça. Escurecer #FF6600 a olho produziu uma geração de palpites #E65C00. HEX é o formato para armazenar uma cor, não o formato para raciocinar sobre uma — exatamente a lacuna que o HSL foi inventado para preencher.

RGB: o modelo aditivo, enunciado sem rodeios

Telas não refletem tinta; elas emitem luz, e o RGB é aditivo: preto é todos os canais desligados, branco é todos ligados, e toda cor é uma mistura. rgb(255, 102, 0) diz isso sem rodeios — vermelho total, um pouco de verde, nada de azul. É a notação que combina com a física, o que a torna a escolha natural quando você está depurando um valor renderizado, lendo dados de imagem ou misturando luz de fato (some duas cores RGB e você obtém um resultado mais brilhante, o oposto de misturar tintas).

A sua forma com alfa, rgba(), precede a variante HEX de 8 dígitos. O CSS Color 4 também modernizou a sintaxe: rgb(255 102 0 / 0.67) — espaços e uma barra em vez de vírgulas — é equivalente, e o a agora é opcional, já que rgb() aceita quatro valores. Navegadores suportam as duas grafias desde cerca de 2023.

HSL: a roda legível para humanos

O HSL reescreve os mesmos canais como matiz (um ângulo na roda de cores, de 0 a 360: vermelho em 0, verde em 120, azul em 240), saturação (0% é cinza, 100% é totalmente vívido) e luminosidade (0% preto, 100% branco). O seu superpoder são relações legíveis. Precisa de um estado de hover 10% mais claro? hsl(24, 100%, 50%) vira hsl(24, 100%, 60%) — um número movido, a intenção visível no diff. Precisa de uma escala de marca de cinco passos? Mantenha matiz e saturação, varie a luminosidade. No HEX, cada uma dessas edições é um recálculo.

A ressalva honesta: a luminosidade do HSL não é perceptual. hsl(60, 100%, 50%) (amarelo) e hsl(240, 100%, 50%) (azul) alegam ambas 50% de luminosidade, mas o amarelo incendeia enquanto o azul quase se lê como preto. Escalas construídas sobre a luminosidade do HSL, portanto, parecem desiguais ao olho. O CSS Color 4 adicionou oklch() para corrigir exatamente isso — uma notação cilíndrica cuja luminosidade acompanha a percepção humana, de modo que passos iguais parecem iguais. Para escalas uniformes, oklch é a resposta moderna; as ferramentas de cores deste site calculam rampas em OKLab, o espaço perceptual por trás dela.

Alfa e a função color() moderna

Toda notação acima carrega o alfa da mesma maneira: como uma fração de 0 a 1 da opacidade. As grafias diferem — #RRGGBBAA coloca em hexadecimal (AA é 170, cerca de dois terços de opacidade), rgba() e hsla() recebem uma fração separada por vírgulas, e a sintaxe moderna separada por espaços escreve depois de uma barra. Todas produzem resultados idênticos; a forma HEX de 8 dígitos é simplesmente a mais compacta e a que as ferramentas de design mais exportam.

A color() é a mudança maior. Ela nomeia o espaço de cores explicitamente — color(srgb r g b) é o gamute familiar escrito por extenso, enquanto color(display-p3 ...) endereça o gamute mais amplo das telas modernas, e color(oklch ...) expõe o modelo perceptual. O sRGB continua sendo o padrão seguro — conteúdo criado nele renderiza de forma previsível em todo lugar —, enquanto cores display-p3 só chegam onde a sintaxe é suportada, essencialmente todos os navegadores evergreen desde 2023.

• #RRGGBBAA — alfa em hex, AA = 170 ≈ 67% de opacidade.
• rgba(255, 102, 0, 0.67) — sintaxe legada com vírgulas, ainda universal.
• rgb(255 102 0 / 0.67) — sintaxe do CSS Color 4; o a agora é opcional.
• color(display-p3 1 0.4 0 / 0.67) — cor de gamute mais amplo, espaço nomeado logo de início.

Contraste: a verificação que supera o gosto

Nenhuma escolha de notação importa se os usuários não conseguem ler o texto. O contraste do WCAG exige uma proporção de pelo menos 4.5:1 entre o texto e o seu fundo para texto normal no nível AA, 3:1 para texto grande (aproximadamente 24 px regular ou 19 px negrito e acima) e 7:1 para o nível AAA mais estrito. A proporção é calculada a partir da luminância relativa, que é uma propriedade da própria cor — a notação em que você a escreveu é irrelevante, o que é mais uma maneira de todos esses formatos serem a mesma cor.

O fluxo prático é mecânico: escolha as cores como quiser, depois verifique os pares antes de publicar. Texto corrido sobre o seu fundo, texto de placeholder sobre inputs, texto branco sobre a cor da marca — cada par precisa do seu número. Um verificador de contraste o reporta instantaneamente — mais barato do que adaptar uma paleta inacessível sob prazo.