Guia do Modelo OKLCH no CSS Moderno

Guia do Modelo OKLCH no CSS Moderno para frontend

Durante muitos anos, HEX foi o formato padrão para declarar cores na web. Ele é compacto, amplamente suportado e fácil de copiar. O problema é que HEX não explica nada sobre percepção. Um azul e um amarelo podem ter valores numéricos parecidos em RGB, mas parecerem radicalmente diferentes em brilho. Isso dificulta a criação de escalas equilibradas para design systems.

O HSL tentou resolver esse problema separando matiz, saturação e luminosidade. A ideia é boa, mas a luminosidade do HSL não corresponde bem à luminosidade percebida pelo olho humano. Quando você mantém o mesmo valor de lightness e muda apenas o hue, algumas cores parecem muito mais claras ou muito mais escuras. Amarelos ficam visualmente luminosos demais, azuis e roxos podem parecer profundos demais, e a escala deixa de ser uniforme.

O OKLCH parte de um espaço perceptual mais moderno. Ele foi projetado para que alterações em luminosidade e croma se comportem de forma mais próxima da percepção humana. Isso é especialmente útil para criar paletas de interface, variações de hover, estados desabilitados, escalas de tema claro e escuro e tokens que precisam manter coerência visual.

Como a luminosidade perceptiva funciona

O olho humano não percebe todos os matizes com a mesma intensidade. Em geral, verdes e amarelos podem parecer mais luminosos que azuis com valores digitais semelhantes. Isso acontece porque nossa percepção visual responde de maneira desigual ao espectro. Sistemas como RGB e HEX descrevem emissão de luz em canais técnicos. Eles são ótimos para tela, mas não são ideais para desenhar escalas visuais coerentes.

Em uma paleta HSL, mudar o hue enquanto mantém a lightness pode gerar botões que parecem ter pesos diferentes. Um botão amarelo e um botão azul com o mesmo valor de HSL lightness raramente parecem igualmente claros. No OKLCH, o valor L tenta estabilizar essa percepção. Se você cria uma família de cores com L semelhante, a chance de elas parecerem equilibradas é muito maior.

Estrutura de oklch com luminosidade, croma e matiz

A sintaxe básica usa três valores. O primeiro é a luminosidade, normalmente escrita como porcentagem ou número. O segundo é o croma, que define a intensidade da cor. O terceiro é o matiz em graus, equivalente ao ângulo no círculo cromático. A estrutura fica clara quando você lê a cor como intenção visual.

.button {
  background: oklch(58% 0.18 260);
  color: white;
}

Nesse exemplo, 58% controla o brilho percebido, 0.18 controla a força cromática e 260 aponta para uma região azul. Para criar uma versão de hover mais escura, você pode reduzir apenas a luminosidade e preservar croma e matiz. Isso mantém a identidade da cor sem mudar sua personalidade.

.button {
  background: oklch(58% 0.18 260);
}

.button:hover {
  background: oklch(50% 0.18 260);
}

Criando paletas consistentes com poucas linhas de CSS

O maior ganho do OKLCH aparece quando você define tokens a partir de uma mesma família cromática. Em vez de escolher manualmente dez tons e torcer para que eles pareçam coerentes, você pode variar a luminosidade de forma controlada, manter matiz estável e ajustar croma conforme o tom fica mais claro ou mais escuro.

:root {
  --brand-50: oklch(97% 0.03 260);
  --brand-100: oklch(93% 0.05 260);
  --brand-300: oklch(78% 0.11 260);
  --brand-500: oklch(58% 0.18 260);
  --brand-700: oklch(45% 0.17 260);
  --brand-900: oklch(31% 0.12 260);
}

.card-info {
  background: var(--brand-50);
  border-color: var(--brand-100);
  color: var(--brand-900);
}

.button-primary {
  background: var(--brand-500);
  color: white;
}

.button-primary:hover {
  background: var(--brand-700);
}

Também é possível criar temas com `color-mix()` e OKLCH. Isso permite misturar cores em um espaço mais previsível, evitando resultados acinzentados ou desequilibrados. Em interfaces complexas, esse tipo de técnica reduz variações aleatórias e facilita manter consistência entre componentes.

:root {
  --brand: oklch(58% 0.18 260);
  --surface: oklch(98% 0.01 260);
  --brand-soft: color-mix(in oklch, var(--brand) 14%, white);
  --brand-strong: color-mix(in oklch, var(--brand) 82%, black);
}

Cuidados práticos ao usar OKLCH

O OKLCH é poderoso, mas ainda exige validação. Cores com croma muito alto podem sair do gamut em alguns monitores ou navegadores, especialmente em matizes muito vivos. Por isso, teste em dispositivos reais e sempre valide contraste. Uma paleta perceptualmente coerente ainda pode falhar em acessibilidade se texto e fundo não atingirem a razão mínima exigida.

Outra boa prática é manter fallbacks quando o projeto precisa suportar ambientes antigos. Você pode declarar primeiro uma cor em HEX e depois sobrescrever com OKLCH. Navegadores modernos usam a segunda declaração, enquanto ambientes sem suporte permanecem com a primeira.

.notice {
  background: #eef2ff;
  background: oklch(96% 0.03 260);
  color: #172033;
}