Espaços de cor: HEX, RGB, HSL e por que o HSL mente sobre brilho

O que é um espaço de cor

Uma tela produz cor misturando três luzes: vermelho, verde e azul. Isso é síntese aditiva, apagados, dão preto; no máximo, dão branco. Um espaço de cor é apenas um sistema de coordenadas para apontar uma cor específica dentro do que o dispositivo consegue exibir. Quase toda a web usa o gamut sRGB, o conjunto de cores padrão de monitores comuns; HEX, RGB, HSL e HSV são notações diferentes para pontos dentro desse mesmo gamut.

Duas distinções organizam tudo o que vem a seguir. A primeira: trocar de notação (RGB para HSL) não muda a cor, só a forma de descrevê-la; já trocar de gamut (sRGB para Display P3) pode mudar quais cores existem. A segunda, menos óbvia e o coração deste guia: descrever uma cor não é o mesmo que medir como ela é percebida. HEX, RGB, HSL e HSV descrevem bem; nenhum deles mede brilho percebido. Para isso existe uma linhagem paralela de espaços, CIELAB, e mais recentemente o Oklab, construídos a partir de como o olho humano realmente enxerga.

1. 1931CIE XYZ e o observador padrão

   A CIE mapeia toda cor visível a partir de experimentos de correspondência com observadores humanos, criando o espaço XYZ, a base matemática de todos os outros.

2. 1976CIELAB (CIE L*a*b*)

   A CIE publica o L*a*b*, o primeiro espaço pensado para ser perceptualmente uniforme: distâncias iguais deveriam parecer diferenças iguais.

3. 1996sRGB vira o padrão da web

   HP e Microsoft propõem o sRGB como espaço padrão da internet; ele vira a norma IEC 61966-2-1 em 1999. É o gamut que HEX, RGB e HSL assumem por padrão.

4. 2020Oklab

   Björn Ottosson publica o Oklab, corrigindo a previsão de matiz e luminosidade do CIELAB, sobretudo nos azuis, para a gama de uma tela.

5. 2022–2023CSS Color 4 nos navegadores

   oklch() e oklab() chegam ao Safari 15.4 (2022) e a Chrome, Edge e Firefox em 2023; viram Baseline "amplamente disponível" em maio de 2023.

HEX e RGB: a mesma cor por canal

RGB dá a intensidade de cada canal de 0 a 255. rgb(51, 102, 204) significa: vermelho baixo, verde médio, azul alto, um azul-royal. HEX é a mesma coisa em base 16 (hexadecimal): cada par de dígitos é um canal de 00 a FF, ou seja, 0 a 255. Por isso #3366CC = rgb(51, 102, 204): 33 em base 16 é 51, 66 é 102, CC é 204. Não há informação nova no HEX, só uma escrita mais curta, ideal para colar no CSS.

HEX  ->  RGB   (cada par e um canal, base 16 -> base 10)
  33 = 3*16 + 3   = 51
  66 = 6*16 + 6   = 102
  CC = 12*16 + 12 = 204
#3366CC  =  rgb(51, 102, 204)

HEX de 3 digitos: #39C  ->  #3399CC  (cada digito e duplicado)
HEX de 8 digitos: #3366CC80  ->  os dois ultimos (80) sao o alfa

Duas conveniências do HEX: a forma curta de 3 dígitos (#39C) duplica cada dígito para virar 6, e a forma de 8 dígitos acrescenta um par de alfa no fim. O alfa 80 em base 16 é 128, que dividido por 255 dá cerca de 0,50, meia transparência. A sintaxe moderna do CSS Color 4 também aceita canais separados por espaço, com o alfa depois de uma barra: rgb(51 102 204 / 50%) é a forma atual de escrever rgba(51, 102, 204, 0.5). Pense em RGB/HEX quando você fala a língua da máquina: canais, telas, código.

HSL: intuitivo, mas mente sobre brilho

Ninguém pensa "preciso de mais 40 de verde e menos 20 de azul". Pensamos "quero esse mesmo azul, só que mais claro". HSL (Hue, Saturation, Lightness) reorganiza a cor em torno dessa intuição: o matiz (H) é um ângulo de 0 a 360° numa roda; a saturação (S) vai de cinza a cor pura; e a luminosidade (L) supostamente vai de preto a branco. O detalhe fatal está no L. Ele não é medido a partir do olho: é uma reprojeção trivial do RGB, a média aritmética do canal mais alto e do mais baixo. Pura geometria do cubo RGB.

As duas fórmulas não têm nada em comum. O L do HSL não conhece esses pesos: para ele, vermelho, verde e azul "puros" são todos igualzinhos, um L de 50%. A luminância relativa sabe que o olho é dez vezes mais sensível ao verde do que ao azul. O resultado é a prova de que o HSL mente: um punhado de cores com o mesmo L de 50% emite quantidades de luz radicalmente diferentes. Abaixo, a luminância real de seis cores que o HSL insiste em chamar de "50% claras".

Conversão passo a passo (e a luminância que o HSL esconde)

Vamos converter #3366CC até HSL e, na sequência, calcular a luminância real que ele carrega, a conta que o HSL nunca mostra. Primeiro normalizamos cada canal dividindo por 255; daí saem luminosidade, saturação e matiz por geometria; depois linearizamos os canais e aplicamos os pesos perceptuais:

#3366CC -> rgb(51, 102, 204)

1) Normaliza  (canal / 255)
   R = 51/255  = 0.20     G = 102/255 = 0.40     B = 204/255 = 0.80

2) HSL  (geometria do cubo RGB)
   max = 0.80   min = 0.20   delta = 0.60
   L = (max + min) / 2            = 0.50   -> 50%
   S = delta / (1 - |2L - 1|)     = 0.60   -> 60%
   H = ((R - G)/delta + 4) * 60   = 220 graus
   => hsl(220, 60%, 50%)

3) Luminancia relativa  (lineariza, depois pesa)
   lin(c) = ((c + 0.055)/1.055)^2.4    para c > 0.04045
   R_lin = 0.0331   G_lin = 0.1328   B_lin = 0.6038
   Y = 0.2126*0.0331 + 0.7152*0.1328 + 0.0722*0.6038
   Y = 0.146   -> 14.6% da luz do branco

O HSL diz L = 50%.  A luminancia real e 14.6%.  Nao sao a mesma coisa.

Repare no salto do passo 3. O HSL declara "L = 50%" para o #3366CC, mas o pixel só emite 14,6% da luz de um branco. A culpa é dupla: o azul, canal dominante, tem o menor peso perceptual (0,0722), e a linearização derruba ainda mais os valores intermediários (um canal em 0,80 vira 0,60 de luz; um em 0,40 vira só 0,13). O HSL ignora as duas coisas. Agora o par que fecha o argumento, dois HEX com o mesmo L e luminâncias em lados opostos da escala:

1. Amarelo #FFFF00rgb(255, 255, 0), normalizado (1, 1, 0). max = 1, min = 0, então L = (1 + 0) / 2 = 0,50, o HSL diz 50%. Ao linearizar, o canal em 1 continua 1 e o canal em 0 continua 0, então Y = 0,2126×1 + 0,7152×1 + 0,0722×0 = 0,9278, ou seja, 92,78% da luz do branco.
2. Azul #0000FFrgb(0, 0, 255), normalizado (0, 0, 1). max = 1, min = 0, então L = 0,50, o HSL também diz 50%. Mas Y = 0,2126×0 + 0,7152×0 + 0,0722×1 = 0,0722, só 7,22% da luz do branco.
3. O vereditoDois HSL idênticos no L (50%), e o amarelo emite quase 13 vezes mais luz que o azul. É por isso que o mesmo "L" produz brilhos percebidos completamente diferentes, e por que um texto azul pode reprovar num contraste que o mesmo tom em amarelo passaria com folga. O "50% do HSL" não é uma promessa sobre brilho; é só um ponto no meio do cubo.

OKLCH: quando o "L" volta a significar brilho

Se o problema é que o L do HSL não corresponde ao brilho, a solução é usar um espaço cujo eixo de luminosidade seja perceptual. Foi o que Björn Ottosson publicou em 2020 com o Oklab, e sua versão em coordenadas polares, o OKLCH (Lightness, Chroma, Hue). Ottosson otimizou o espaço numericamente sobre um grande conjunto de cores visualmente semelhantes, corrigindo justamente onde o CIELAB errava mais: a previsão de matiz nos azuis. Em OKLCH, um L de 0,5 realmente parece meio caminho entre o preto e o branco, para qualquer matiz. O CSS Color 4 adotou tudo isso: oklch(), oklab(), lab(), lch() e a função color() para gamuts amplos.

A diferença aparece de forma dramática em gradientes. A própria motivação de Ottosson era que "misturar duas cores deveria produzir transições regulares". Por isso o CSS Color 4 escolheu o Oklab como espaço de interpolação padrão de gradientes e da função color-mix(): a rota entre duas cores fica perceptualmente reta, sem o cinza que aparece ao interpolar no sRGB nem as bandas irregulares do HSL. Se você monta rampas de cor para um gerador de cores ou para tokens de design, é a diferença entre uma escala que "respira" igual e uma que trava no meio.

Qual usar quando

HEX

Padrão do CSS e dos design tokens: curto, sem vírgulas, fácil de copiar. Use para fixar cores estáticas.

RGB(A)

Quando você pensa em canais ou precisa de alfa explícito. A forma moderna é rgb(51 102 204 / 50%), com espaços e barra.

HSL(A)

Bom para ajustes rápidos de matiz e para variar tons dentro de uma cor, mas lembre que o L não é brilho percebido.

OKLCH

A escolha atual para paletas, gradientes e escalas acessíveis: L perceptual, matiz previsível, interpolação suave.

CMYK / LAB

CMYK é para impressão (tinta, síntese subtrativa, gamut menor); LAB serve para medir diferença de cor entre dois tons.

Uma nota sobre medir "quão diferentes" duas cores são: em espaços perceptuais como o LAB, a distância entre dois pontos é chamada ΔE. Uma diferença de cerca de 1 ΔE fica no limiar em que a diferença começa a ser perceptível lado a lado; alguns estudos situam a diferença apenas perceptível (JND) perto de 2,3. É por isso que dois azuis "quase iguais" no HEX podem ser óbvios ao olho, e dois amarelos "bem diferentes" no número podem parecer o mesmo tom, a distância no HEX não é a distância que você vê.

O alfa é ortogonal a tudo isso: é a opacidade da cor, de 0 (transparente) a 1 (opaco), disponível como rgb(... / a), hsl(... / a) ou o par final do HEX de 8 dígitos. E cor na tela é sempre sRGB e aditiva, enquanto cor impressa é CMYK e subtrativa, com um gamut menor, por isso um laranja vibrante do monitor pode sair mais apagado no papel. Não é erro de conversão; é o gamut de impressão que não alcança aquela cor.