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

Os códigos de cor hex, como #7c3aed, são o jeito mais comum de escrever uma cor na tela: um # seguido de seis caracteres que indicam a quantidade de vermelho, verde e azul. O RGB escreve os mesmos números em decimal, o HSL os reorganiza em matiz, saturação e luminosidade, e o OKLCH descreve a cor do jeito que o olho a percebe. São notações diferentes para as mesmas cores, e cada uma é melhor em uma tarefa.

Como funcionam os códigos de cor hex

Um código hex 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, então cada par vai de 00 (nenhum) a ff (255, cheio). Em #7c3aed, o vermelho é 7c (124), o verde é 3a (58) e o azul é ed (237): muito azul, um bom tanto de vermelho, pouco verde, ou seja, violeta. Três canais de 256 valores dão 16.777.216 cores possíveis.

• Forma curta: #f0c é o mesmo que #ff00cc. Cada dígito é dobrado, então 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 de 255.
• Maiúsculas e minúsculas não importam: #7C3AED e #7c3aed são idênticos.
• Cinzas 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 comuns de 0 a 255. O CSS moderno os separa com espaços e acrescenta a transparência depois de uma barra; a sintaxe antiga com vírgulas e o rgba() ainda funcionam em todo lugar. O RGB é útil quando uma ferramenta ou API pede números, ou quando você quer 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, do cinza (0%) à cor plena (100%), e pela sua luminosidade, do preto (0%) passando pela cor pura (50%) até o branco (100%). É fácil de ajustar à mão: para obter um violeta mais escuro, diminua o último número.

O problema é que a luminosidade do HSL é uma fórmula, não uma medida de quão clara a cor parece. Amarelo a 50% de luminosidade parece muito mais brilhante do que azul a 50%. Se você monta uma paleta mantendo a luminosidade HSL igual, as cores não parecerão igualmente claras, e é exatamente por isso que os arco-íris padrão parecem listrados. Veja gradientes arco-íris para o resultado visível.

OKLCH: a cor do jeito que você a vê

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

O OKLCH brilha nos gradientes. Ao misturar em sRGB simples, o padrão para cores hex, o gradiente traça uma linha reta pelo cubo RGB, e cores em lados opostos do círculo se encontram no cinza. Misturar em OKLCH mantém o croma e percorre o círculo de 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);
}

Qual código de cor usar em cada caso

Para testar qualquer um desses valores, o oklch.com mostra uma cor em todas as notações e avisa quando ela cai fora da gama de uma tela, e a referência de cores do MDN cobre todas as sintaxes. Se você está escolhendo cores em vez de escrevê-las, como escolher as cores da marca é o próximo passo, e contraste de cores mostra como conferir se o texto continua legível.