OKLCH explicado: cor perceptiva para designers

O OKLCH é uma forma de escrever a cor como luminosidade, croma e matiz, em que a luminosidade é medida como os olhos humanos a percebem. Em CSS, oklch(60% 0.2 293) é um violeta que parece estar a 60% do caminho entre o preto e o branco, com cor forte, num ângulo de matiz de 293 graus. O ganho prático para designers é simples: mude o matiz e mantenha o L, e a nova cor parece igualmente clara. O HSL não consegue prometer isso, e esse é o motivo de o OKLCH ter virado o padrão em design systems mais novos, incluindo a paleta de cores do Tailwind.

Luminosidade, croma e matiz

A luminosidade é a estrela. Ela vem do OKLab, um espaço de cor publicado em 2020 e criado para prever luminosidade, intensidade de cor e matiz percebidos de forma mais uniforme que os modelos antigos. O croma substitui a saturação: em vez de uma porcentagem de algum máximo, é uma quantidade absoluta de cor, então um croma de 0,1 significa a mesma intensidade visual em qualquer matiz. O matiz continua sendo um ângulo, mas os ângulos são espaçados para que um passo de 30 graus pareça uma mudança semelhante ao longo de toda a roda.

OKLCH vs HSL: a mesma luminosidade, lado a lado

Tome seis matizes e fixe a luminosidade e o croma em oklch(65% 0.11 H). As amostras abaixo parecem uma só família, e o contraste delas contra o branco fica entre 3,1:1 e 3,4:1. Faça o mesmo no HSL com 50% de luminosidade e o contraste contra o branco oscila de cerca de 1,07:1 para o amarelo a 8,6:1 para o azul.

Essa uniformidade é o que torna o OKLCH útil no trabalho real. Um conjunto de cores de status, séries de gráfico ou etiquetas de categoria pode compartilhar um mesmo L e C e diferir só no matiz, e nenhuma grita mais alto que as outras. Se você precisar de um conjunto seguro para daltonismo, varia também o L, o que é tratado em paletas amigáveis para daltônicos.

Como escrever OKLCH em CSS

:root {
  /* lightness as a percentage or a number */
  --violet: oklch(60% 0.2 293);
  --violet-same: oklch(0.6 0.2 293);

  /* with transparency */
  --violet-soft: oklch(60% 0.2 293 / 0.4);

  /* grey: chroma 0, hue ignored */
  --grey: oklch(60% 0 0);
}

/* a fallback for very old browsers comes first */
.button {
  background: #8860ea;
  background: oklch(60% 0.2 293);
}

O suporte dos navegadores é amplo, e você pode conferir o detalhe no caniuse. Para explorar valores visualmente, o oklch.com é um seletor que mostra quais combinações uma tela comum consegue exibir. Para converter um hex de marca existente, cole-o nesse seletor ou no painel de cores das devtools do navegador, que pode mostrar qualquer cor em OKLCH.

Montando uma escala com OKLCH

Para criar uma escala de tons claros e escuros, aumente a luminosidade em passos iguais e deixe o croma subir em direção ao meio e cair nas pontas. Cores muito claras e muito escuras fisicamente não comportam muita cor, então, se você mantém o croma alto nos extremos, o navegador precisa cortá-las. Aqui está uma escala de violeta construída assim.

Como o L acompanha a luminosidade percebida, você pode tomar decisões aproximadas de contraste só pelos números. Nesta escala, texto branco passa em 4,5:1 do L 50 para baixo, e texto preto passa do L 60 para cima. Confirme sempre com um verificador de contraste, mas raramente você terá surpresas. Transformar uma escala assim em tokens nomeados é assunto de design tokens.

Gamut: quando uma cor não existe na tela

O OKLCH pode descrever cores que nenhuma tela consegue mostrar. A maioria dos monitores exibe sRGB; muitos celulares e notebooks recentes exibem o Display P3, mais amplo. Aumente o croma o bastante e você sai dos dois. Quando isso acontece, o navegador traz a cor de volta para a mais próxima que a tela consegue mostrar, então nada quebra, mas você pode não obter o que digitou.

Degradês em OKLCH

Os degradês são onde a cor perceptiva mais compensa de forma visível. Um degradê CSS comum mistura em sRGB, que afunda no cinza entre matizes distantes. O CSS moderno deixa você escolher o espaço em que misturar, e OKLab ou OKLCH mantêm o meio brilhante e limpo.

O OKLab mistura em linha reta e serve para a maioria dos degradês de duas cores. O OKLCH gira o matiz, o que é lindo para pores do sol e arco-íris, mas pode surpreender. A técnica completa, incluindo as palavras-chave shorter hue e longer hue, está em degradês CSS em OKLCH, e a teoria por trás, em interpolação de degradês.

Os Marks do Gradiently são renderizados ao vivo em vez de escritos como CSS, e cada um traz a própria paleta: a tinta automática escolhe texto claro ou escuro a partir dessa paleta para cada linha, então as palavras se leem sem que você confira números. Se você prefere começar por um fundo vivo pronto em vez de um valor num seletor, navegue pelo Mercado por palavras de cor.