OKLCH para designers: por que ele substituiu o HSL

Se você já montou uma escala de cores com passos iguais de luminosidade no HSL e achou que o meio ficou estranho, você já encontrou o motivo de o OKLCH existir.

O que há de errado com o HSL

O HSL é prático. Matiz como ângulo, saturação e luminosidade como porcentagens: fácil de entender, fácil de ajustar à mão.

O problema é que o eixo de luminosidade dele não corresponde à luminosidade percebida. hsl(60 100% 50%) é um amarelo vivo. hsl(240 100% 50%) é um azul profundo. Os dois dizem ter 50% de luminosidade. Coloque um ao lado do outro e o amarelo é muito mais claro: a luminância relativa medida é 0.928 contra 0.072, uma diferença de cerca de treze vezes.

Isso não é erro de arredondamento. É consequência de o HSL ser uma transformação matemática direta do RGB, sem nenhum modelo da visão humana. Os nossos olhos são muito mais sensíveis aos comprimentos de onda do verde do que aos do azul, e o HSL não sabe disso.

O estrago na prática:

• Uma escala feita com passos iguais de HSL parece irregular, acumulando tons em algumas regiões e saltando em outras
• Duas cores com a mesma luminosidade HSL têm contrastes muito diferentes contra o mesmo fundo
• Ajustar a saturação muda a luminosidade aparente como efeito colateral

O que o OKLCH faz de diferente

O OKLCH é construído sobre o espaço de cor Oklab, projetado especificamente para que a distância numérica corresponda à distância percebida.

Três componentes:

• L: luminosidade, de 0% a 100%, perceptualmente uniforme
• C: croma, mais ou menos a saturação, começando em 0 e sem limite superior fixo
• H: matiz, de 0 a 360 graus

A propriedade importante: passos iguais em L parecem passos iguais. oklch(50% 0.2 60) e oklch(50% 0.2 250) realmente são percebidos com a mesma luminosidade, um amarelo-alaranjado e um azul.

Isso torna os três componentes independentes do jeito que os designers já presumem que eles sejam. Você pode mudar a luminosidade sem que a cor pareça mudar de matiz, e mudar o matiz sem que a cor pareça ficar mais clara.

Por que isso importa para o contraste

O contraste depende quase totalmente da luminosidade. O matiz quase não o afeta, e a saturação, praticamente nada.

No OKLCH, isso significa que existe exatamente um botão para girar. Mantenha H e C, mova L, e você muda o contraste mantendo a cor reconhecível. No HSL, o mesmo movimento mudaria a cor aparente, porque a luminosidade do HSL está emaranhada com todo o resto.

É isso que transforma “manter a cor da marca e corrigir o contraste” num problema solucionável, e não numa negociação. A sua marca vive no matiz; a medição vive na luminosidade; o OKLCH mantém os dois separados.

Montando uma escala

A abordagem padrão é manter o matiz, avançar a luminosidade em passos iguais e reduzir o croma nas duas pontas, porque cores muito claras e muito escuras não sustentam saturação alta sem sair da faixa que a tela consegue exibir.

--blue-100: oklch(95% 0.03 255);
--blue-300: oklch(82% 0.09 255);
--blue-500: oklch(62% 0.16 255);
--blue-700: oklch(48% 0.14 255);
--blue-900: oklch(30% 0.08 255);

Um matiz, passos iguais de luminosidade, croma com pico no meio. O resultado parece uma família coerente, que é exatamente o que uma escala HSL com passos iguais não consegue entregar.

A armadilha do gamut

O OKLCH consegue descrever cores que a sua tela não consegue mostrar. oklch(70% 0.4 150) é uma coordenada perfeitamente válida e fica muito fora do sRGB.

Quando isso acontece, o navegador corta a cor (clipping), e esse corte não é suave: pode mudar o matiz de forma perceptível, de modo que a cor que você recebe não é a que você especificou. Qualquer ferramenta que faça contas em OKLCH precisa reduzir o croma até a cor caber, em vez de deixá-la ser cortada. Se você escreve os valores à mão, mantenha o croma abaixo de cerca de 0.24 para ficar seguro no sRGB, ou confira numa ferramenta que leve o gamut em conta.

Suporte nos navegadores

O OKLCH é suportado em todos os principais navegadores desde 2023 e tem status Baseline Widely available. Você pode escrevê-lo direto no CSS, sem fallback, para a maior parte do público:

color: oklch(62% 0.16 255);

O Tailwind CSS v4 usa OKLCH na paleta padrão, o que é um bom sinal de onde o ecossistema chegou.

Quando o HSL ainda serve

Para um ajuste rápido e pontual numa única cor, o HSL serve perfeitamente, e o modelo mental é familiar.

No momento em que você está gerando um sistema (uma escala, um conjunto de tokens semânticos, variantes clara e escura da mesma cor de marca), a uniformidade importa, e o HSL vai brigar com você o tempo todo.

O nosso verificador de contraste faz a busca em OKLCH exatamente por esse motivo: ele consegue manter o seu matiz e o seu croma fixos e mover só a luminosidade, e é assim que encontra a cor aprovada mais próxima que ainda se parece com a sua.