Códigos de Cor HEX, RGB e HSL Explicados

Se alguma vez abriu um ficheiro de design, copiou #3B82F6 e se interrogou porque é que o mesmo azul também aparece como rgb(59, 130, 246) e hsl(217, 91%, 60%), deparou-se com os três formatos de cor em que todo o web designer e developer front-end acaba por ter de ser fluente. Todos descrevem exatamente o mesmo pixel. Apenas o descrevem em línguas diferentes, e cada língua é boa para um trabalho diferente.

Já lancei design systems onde escolher o formato errado custou horas. Entregue a um developer uma parede de códigos hex para o estado de hover de um botão e obtém adivinhação. Entregue-lhe uma escala HSL e a relação entre as cores torna-se óbvia. Por isso isto é menos um despejo árido de especificações e mais o modelo mental de trabalho que gostava que alguém me tivesse dado cedo: o que cada formato realmente codifica, e quando recorrer a ele.

HEX: o formato que copia, não aquele em que raciocina

Um código de cor hex é apenas RGB vestido com outra roupa. #RRGGBB são seis dígitos hexadecimais divididos em três pares — vermelho, verde, azul — e cada par é um byte. O hexadecimal (base 16) vai de 0 a 9 e depois de A a F, por isso dois dígitos hex cobrem 00 a FF, que é 0 a 255 em decimal. Isso é exatamente um canal de 8 bits por cor. Três canais, três bytes, e as familiares 16,777,216 cores possíveis (256 × 256 × 256).

É essa toda a razão pela qual são seis dígitos: um byte para cada um de R, G e B. Pegue em #3B82F6. Divida-o: 3B, 82, F6. Converta cada par de hex para decimal — 3B é 59, 82 é 130, F6 é 246 — e acabou de fazer uma conversão manual de hex para RGB. É rgb(59, 130, 246). A mesma cor, sem magia.

Há uma abreviatura: #RGB expande-se duplicando cada dígito, por isso #F00 torna-se #FF0000 (vermelho puro) e #0AF torna-se #00AAFF. Só funciona quando cada canal calha ser um dígito repetido, e é por isso que a vê sobretudo para valores redondos como #FFF, #000 ou #333. Prática em CSS escrito à mão, inútil para os azuis arbitrários que uma marca efetivamente lança.

O hex também lida com a transparência, o que surpreende as pessoas. O CSS Color Module Level 4 acrescentou o hex de oito dígitos, #RRGGBBAA, onde o último par é o alpha: 00 totalmente transparente, FF totalmente opaco. Por isso #3B82F680 é aquele mesmo azul a cerca de 50% de opacidade. Há também uma abreviatura de quatro dígitos (#RGBA), onde se aplicam as mesmas regras de duplicação ao estilo #3B8 e cada dígito duplica. É suportado em todos os principais browsers atuais; só o antiquíssimo Internet Explorer falha, caso em que rgba() é a alternativa de recurso.

A força do hex é ser compacto e inequívoco — um único token, fácil de copiar, fácil de colar numa ferramenta de design ou numa variável CSS. A sua fraqueza é que diz ao seu cérebro quase nada. Será #3B82F6 mais claro ou mais escuro do que #2563EB? Genuinamente não consegue saber só de os ler. É esse o precipício de onde o hex cai.

RGB: como o ecrã realmente pensa

O RGB é o modelo de cor aditivo no qual o seu monitor funciona. Cada pixel são três luzinhas — vermelho, verde, azul — e os valores dizem quão brilhante cada luz é, de 0 a 255. As três a 0 é preto (todas as luzes desligadas). As três a 255 é branco (todas as luzes ao máximo). Aumente o vermelho e o verde, deixe o azul desligado, e obtém amarelo, o que parece ao contrário se cresceu a misturar tinta, onde vermelho e verde fazem lama. Os ecrãs somam luz; a tinta subtrai-a. Essa é a ideia central da cor aditiva, e vale a pena retê-la porque explica muitos momentos de "porque é que esta cor está a fazer aquilo".

Em CSS escreve-se rgb(59 130 246) (sintaxe moderna separada por espaços) ou rgb(59, 130, 246) (vírgulas legadas); ambas servem. Acrescente o alpha com uma barra — rgb(59 130 246 / 50%) — que substituiu discretamente a antiga função separada rgba(), embora rgba() continue a funcionar em todo o lado.

O RGB é mais legível do que o hex porque os números são decimais e os canais são explícitos. Se vir rgb(250, 250, 250) sabe imediatamente que é um quase-branco, porque os três estão fixados no alto. Mas partilha a verdadeira falha do hex: é péssimo para ajustar uma cor. Para tornar rgb(59, 130, 246) 10% mais escuro, não pode simplesmente mexer num número — tem de mover os três canais em conjunto, e acertar nas proporções à mão é trabalho de tolos. O que nos traz ao formato que efetivamente resolve isto.

HSL: aquele em que deve raciocinar

O HSL — hue, saturação, luminosidade — é o formato em que faço quase todo o meu pensamento, e é o que o gerador de paletas de cores mostra para cada cor que produz, ao lado do RGB. Em vez de descrever uma cor por quanto de três luzes misturar, descreve-a da forma como um humano o faria.

• Hue é um ângulo na roda de cores, de 0 a 360 graus. 0 (e 360) é vermelho, 120 é verde, 240 é azul. Rode o ângulo e percorre o arco-íris.
• Saturação é o quão viva é a cor, de 0% a 100%. A 0% obtém cinzento independentemente do hue; a 100% é tão intensa quanto o ecrã permite.
• Luminosidade é o quão clara ou escura, de 0% a 100%. 0% é sempre preto, 100% é sempre branco, e 50% é a versão "pura" do hue.

O nosso azul é hsl(217, 91%, 60%). Agora veja o que o HSL torna trivial. Quer um shade mais escuro para um estado de botão premido? Baixe a luminosidade: hsl(217, 91%, 45%). Um tint mais claro para um fundo de hover? Suba-a: hsl(217, 91%, 92%). Uma versão esbatida e mais terrosa para um controlo desativado? Puxe a saturação para baixo: hsl(217, 40%, 60%). O hue nunca se mexeu, por isso lê-se inequivocamente como a mesma família de azul o tempo todo. Tente fazer qualquer disto editando canais RGB e vai perceber porque é que o HSL existe.

É também por isto que o HSL é a linguagem natural para construir escalas e tints e shades. Fixe o hue, marche a luminosidade em passos — 95%, 85%, 70%, 55%, 40%, 25% — e tem uma escala coerente desde um tint de fundo pálido até uma cor de texto profunda, todas comprovadamente relacionadas. É essa a espinha dorsal de como construo tokens de cor escaláveis para um design system, e é a mecânica por trás dos tints, shades e tones. O HSL torna até a harmonia de cor uma questão de aritmética: uma cor complementar é apenas o seu hue mais 180 graus, uma tríade são três hues afastados 120 graus. Se quiser a versão mais aprofundada disso, compreender a harmonia de cor no design de UI percorre o assunto.

A sintaxe CSS espelha o resto: hsl(217 91% 60%) ou o legado hsl(217, 91%, 60%), com alpha via hsl(217 91% 60% / 50%). O hue pode levar uma unidade deg mas não precisa dela. Uma ressalva honesta: a luminosidade do HSL não é o mesmo que o brilho percebido. Um amarelo totalmente saturado a 50% de luminosidade parece, ao seu olho, muito mais brilhante do que um azul à idêntica luminosidade de 50%. Isso é uma limitação do modelo, não uma falha nos seus olhos, e é exatamente por isso que existe um verificador de contraste em vez de se confiar no número L — mais sobre isto abaixo.

Então qual usa de facto?

Na prática usa os três, por razões diferentes, e o truque é fazer corresponder o formato ao momento.

• HEX para guardar e partilhar uma única cor — diretrizes de marca, uma variável CSS, colar um valor a um colega. É a língua franca; tudo a lê.
• RGB quando está a trabalhar canal a canal ou a interagir com código que espera canais numéricos — canvas, processamento de imagem, ou sempre que precise de valores brutos de 0–255. Também quando quer um alpha direto e prefere não pensar em pares hex.
• HSL no segundo em que precisa de modificar ou relacionar cores: construir estados de hover e ativo, gerar uma escala de tints, encontrar um destaque harmonioso, ou afinar uma paleta de modo escuro onde está constantemente a mexer na luminosidade e a recuar na saturação para que as cores não vibrem sobre um fundo escuro.

O meu fluxo de trabalho real: raciocino e exploro em HSL, e depois lanço os valores finais como variáveis hex. Escolho o hue, encontro a escala de luminosidade, confirmo a vivacidade com a saturação — depois congelo cada passo como um token hex que o resto da equipa consome.

Uma coisa de que nenhum formato o salva é o contraste. Nenhum de HEX, RGB ou HSL lhe diz se o texto será legível sobre um fundo; isso exige um verdadeiro cálculo de luminância face aos rácios WCAG. A orientação oficial de contraste do W3C pede pelo menos 4.5:1 para texto de corpo normal. É por isto que o gerador combina as suas leituras HSL e RGB com um verificador de contraste incorporado — para que possa ajustar o slider de luminosidade e ver o rácio atualizar-se ao vivo, em vez de lançar um azul bonito que ninguém consegue ler.

Uma vez que estes três formatos deixam de parecer cadeias de caracteres enigmáticas e começam a parecer três vistas de uma só cor — um token copiável, as luzes brutas do ecrã, e um conjunto de mostradores amigos do humano — deixa de lutar com as suas cores e começa a guiá-las. Abra o gerador de paletas de cores, gere algo, e veja como os números HSL se movem à medida que ajusta uma amostra. Esse feedback ao vivo é a forma mais rápida de fazer qualquer disto fazer "clique".