OKLCH explicado: cor percetual 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. A vantagem prática para os designers é simples: muda o matiz e mantém o L, e a nova cor parece igualmente clara. O HSL não o consegue prometer, e é a razão por que o OKLCH se tornou a predefinição em sistemas de design mais recentes, incluindo a paleta de cores do Tailwind.

Luminosidade, croma e matiz

A luminosidade é a estrela. Vem do OKLab, um espaço de cor publicado em 2020 e construído para prever a luminosidade, a intensidade de cor e o matiz percebidos de forma mais uniforme do que os modelos antigos. O croma substitui a saturação: em vez de uma percentagem de algum máximo, é uma quantidade absoluta de cor, por isso um croma de 0,1 significa a mesma intensidade visual seja qual for o matiz. O matiz continua a ser um ângulo, mas os ângulos estão espaçados de modo a que um passo de 30 graus pareça uma mudança semelhante em toda a volta.

OKLCH vs HSL: a mesma luminosidade, lado a lado

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

Essa uniformidade é o que torna o OKLCH útil no trabalho real. Um conjunto de cores de estado, séries de gráfico ou etiquetas de categoria pode partilhar um só L e C e diferir apenas no matiz, e nenhuma grita mais alto do que as outras. Se depois precisares de um conjunto seguro para daltónicos, varias também o L, o que está tratado em paletas amigas de 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 podes confirmar o detalhe no caniuse. Para explorar valores visualmente, o oklch.com é um seletor que mostra que combinações um ecrã normal consegue apresentar. Para converter um hex de marca existente, cola-o nesse seletor ou no painel de cores das ferramentas de programador do navegador, que consegue mostrar qualquer cor em OKLCH.

Construir uma escala com OKLCH

Para fazer uma escala de tons claros e escuros, aumenta a luminosidade em passos iguais e deixa o croma subir para o meio e descer para as pontas. As cores muito claras e muito escuras fisicamente não conseguem guardar muita cor, por isso, se mantiveres o croma alto nos extremos, o navegador tem de as cortar. Aqui fica uma escala de violeta construída assim.

Como o L acompanha a luminosidade percebida, podes tomar decisões de contraste aproximadas só a partir dos números. Nesta escala, o texto branco passa os 4,5:1 de L 50 para baixo, e o texto preto passa de L 60 para cima. Confirma sempre com um verificador de contraste, mas raramente serás surpreendido. Transformar uma escala destas em tokens com nome está tratado em design tokens.

Gama: quando uma cor não existe no ecrã

O OKLCH consegue descrever cores que nenhum ecrã mostra. A maioria dos monitores apresenta sRGB; muitos telemóveis e portáteis recentes apresentam o Display P3, mais amplo. Aumenta o croma o suficiente e sais de ambos. Quando isso acontece, o navegador traz a cor de volta à mais próxima que o ecrã consegue mostrar, por isso nada se parte, mas podes não obter o que escreveste.

Gradientes em OKLCH

Os gradientes são onde a cor percetual compensa de forma mais visível. Um gradiente CSS simples mistura em sRGB, que cai em cinzento entre matizes distantes. O CSS moderno deixa-te escolher o espaço em que misturar, e o OKLab ou o OKLCH mantém o meio brilhante e limpo.

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

Os Marks do Gradiently são gerados ao vivo em vez de escritos como CSS, e cada um traz a sua própria paleta: a tinta automática escolhe texto claro ou escuro a partir dessa paleta para cada linha, por isso as palavras leem-se sem teres de conferir números. Se preferires começar por um fundo vivo já pronto em vez de um valor num seletor, explora o Mercado por palavras de cor.