Códigos de cor hexadecimais, RGB, HSL e OKLCH explicados

Os códigos de cor hexadecimais, como #7c3aed, são a forma mais comum de escrever uma cor no ecrã: um # seguido de seis carateres que dão a quantidade de vermelho, verde e azul. O RGB escreve os mesmos números em decimal, o HSL reorganiza-os em matiz, saturação e luminosidade, e o OKLCH descreve a cor tal como o olho a percebe. São notações diferentes para as mesmas cores, e cada uma é melhor num trabalho diferente.

Como funcionam os códigos de cor hexadecimais

Um código hexadecimal são três pares de dígitos em base 16: #RRGGBB. A base 16 conta de 0 a 9 e depois de a a f, por isso cada par vai de 00 (nada) a ff (255, máximo). Em #7c3aed, o vermelho é 7c (124), o verde é 3a (58) e o azul é ed (237): muito azul, uma boa dose de vermelho, pouco verde, ou seja, violeta. Três canais de 256 valores dão 16 777 216 cores possíveis.

• Forma abreviada: #f0c é o mesmo que #ff00cc. Cada dígito é duplicado, por isso só funciona para cores cujos pares se repetem.
• Transparência: um código de oito dígitos acrescenta o alfa no fim. #7c3aed80 é o violeta com cerca de 50% de opacidade, porque 80 é 128 em 255.
• Maiúsculas ou minúsculas é indiferente: #7C3AED e #7c3aed são idênticos.
• Os cinzentos têm três pares iguais: #767676, #1a1a1a e #f4f4f4 são todos neutros.

RGB: os mesmos números em decimal

O RGB escreve os três canais como números normais de 0 a 255. O CSS moderno separa-os com espaços e acrescenta a transparência depois de uma barra; a sintaxe antiga com vírgulas e rgba() continuam a funcionar em todo o lado. O RGB é útil quando uma ferramenta ou API pede números, ou quando queres ler a composição de uma cor de relance.

/* All four lines are the same violet */
color: #7c3aed;
color: rgb(124 58 237);
color: rgb(124, 58, 237);
color: hsl(262 83% 58%);

/* The same violet at 50% opacity */
color: #7c3aed80;
color: rgb(124 58 237 / 0.5);

HSL: matiz, saturação e luminosidade

O HSL descreve uma cor pelo seu matiz como um ângulo no círculo cromático (0 é vermelho, 120 verde, 240 azul), pela sua saturação, de cinzento (0%) a cor plena (100%), e pela sua luminosidade, de preto (0%), passando pela cor pura (50%), até branco (100%). É fácil de afinar à mão: para um violeta mais escuro, baixa o último número.

O senão é que a luminosidade do HSL é uma fórmula, não uma medida do quão clara a cor parece. O amarelo a 50% de luminosidade parece muito mais brilhante do que o azul a 50%. Se construíres uma paleta mantendo igual a luminosidade HSL, as cores não parecerão igualmente claras, e é exatamente por isso que os arco-íris predefinidos parecem às riscas. Vê os gradientes arco-íris para o resultado visível.

OKLCH: a cor tal como a vês

O OKLCH vem do Oklab, um espaço de cor publicado por Björn Ottosson em 2020 e hoje parte do CSS. Usa três valores: L é a luminosidade percebida de 0% a 100%, C é o croma, o quão colorida é, de 0 para cinzento até cerca de 0,37 para as cores mais vivas, e H é o ângulo do matiz. Valores de L iguais parecem mesmo igualmente claros, por isso podes mudar uma qualidade sem perturbar as outras.

O OKLCH brilha nos gradientes. Ao misturar em sRGB simples, o predefinido para cores hexadecimais, traça-se uma linha reta através do cubo RGB, e cores em lados opostos do círculo encontram-se em cinzento. Misturar em OKLCH mantém o croma e percorre o círculo dos matizes.

.band {
  /* Tell the browser which space to blend in */
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

:root {
  /* One hue, a scale of equal steps in perceived lightness */
  --violet-90: oklch(90% 0.05 293);
  --violet-70: oklch(70% 0.16 293);
  --violet-54: oklch(54.1% 0.247 293);
  --violet-35: oklch(35% 0.16 293);
  --violet-20: oklch(20% 0.08 293);
}

Que código de cor usar onde

Para testar qualquer um destes valores, o oklch.com mostra uma cor em todas as notações e avisa quando cai fora da gama de um ecrã, e a referência de cor da MDN cobre todas as sintaxes. Se estás a escolher cores em vez de as escrever, como escolher as cores da marca é o passo seguinte, e o contraste de cor mostra como verificar se o texto continua legível.