Interpolação de gradientes: sRGB, OKLab e porque importa

A interpolação de gradientes é a forma como se calculam as cores entre as tuas paragens. Escolhes azul numa ponta e amarelo na outra; o software tem de inventar todas as cores intermédias, e fá-lo traçando uma linha entre as duas cores num certo espaço de cor. O espaço que usa muda o que vês. Mistura em sRGB e de azul a amarelo passa por um cinzento chapado. Mistura em OKLCH e passa por um azul-turquesa vivo. As mesmas paragens, um gradiente muito diferente.

O que significa interpolação de gradientes

Cada cor pode ser descrita como um ponto num espaço. Em sRGB os três eixos são vermelho, verde e azul. No OKLab são a luminosidade e dois eixos opostos, de verde a vermelho e de azul a amarelo. No OKLCH são a luminosidade, o croma (quão colorida) e o matiz (o ângulo à volta da roda). Interpolar é caminhar de um ponto para o outro. Um caminho reto num espaço pode ser uma curva, ou um desvio pelo cinzento, noutro.

sRGB, OKLab e OKLCH lado a lado

Porque é que os gradientes sRGB ficam cinzentos ou lamacentos

O sRGB foi concebido para ecrãs, não para o olho. Os seus números têm codificação gama e os eixos não se alinham com a forma como vemos o matiz ou a luminosidade. Quando duas cores estão em lados opostos da roda, a linha reta entre elas passa perto do centro neutro, e o meio perde a cor. Azul e amarelo dão em média #808080. Esta é a principal causa dos gradientes lamacentos, e é por isso que o instinto do designer de acrescentar uma cor-ponte funciona: a paragem extra curva o caminho à volta do cinzento.

OKLab: passos uniformes para o olho

O OKLab, publicado por Björn Ottosson em 2020, foi criado para que distâncias iguais pareçam diferenças iguais. O resultado prático é um gradiente cuja luminosidade muda de forma uniforme de ponta a ponta, sem queda escura nem inchaço claro no meio. Continua a seguir um caminho reto, por isso dois verdadeiros opostos perdem alguma cor no centro, mas muito menos do que em sRGB. O CSS moderno usa o OKLab por predefinição sempre que uma cor do gradiente é escrita numa sintaxe mais recente, como oklch().

OKLCH: manter a cor viva

O OKLCH é o mesmo espaço do OKLab, descrito em forma polar: luminosidade, croma e um ângulo de matiz. Interpolar nele é caminhar à volta da roda, por isso as cores intermédias mantêm a saturação. É ideal para gradientes vivos e de marca e para gradientes arco-íris. Podes também escolher a que lado da roda ir com shorter hue (a predefinição), longer hue, increasing hue ou decreasing hue. O guia de OKLCH explica o espaço com mais profundidade.

Como definir a interpolação de gradientes em CSS

Acrescenta in <espaço> antes das paragens, depois de qualquer ângulo ou forma. Os navegadores que não o entendem ignoram a declaração inteira, por isso escreve primeiro uma versão em sRGB como alternativa. Todos os espaços e palavras-chave de matiz estão listados na referência de interpolação de cor da MDN, e gradientes CSS em OKLCH tem mais receitas.

.hero {
  /* Fallback for older browsers: a bridge stop avoids the grey middle */
  background: linear-gradient(135deg, #2563eb, #c026d3, #f97316);
  /* Modern browsers: let OKLCH keep the colour */
  background: linear-gradient(135deg in oklch, #2563eb, #f97316);
}

.radial {
  background: radial-gradient(circle at 30% 30% in oklab, #fde68a, #0f766e);
}

.conic-rainbow {
  background: conic-gradient(in oklch longer hue, #ef4444, #ef4444);
}

Que espaço de cor escolher

1. 1

   Usa o OKLab por predefinição

   Para a maioria das misturas de duas ou três cores, dá o resultado mais suave e sem surpresas.

2. 2

   Usa o OKLCH para cores distantes ou vivas

   Quando as cores estão longe na roda e queres que o meio continue brilhante.

3. 3

   Mantém o sRGB para igualar trabalho antigo

   Se um gradiente tem de parecer idêntico a um recurso ou imagem existente, mistura no mesmo espaço em que foi feito.

4. 4

   Verifica o ponto médio

   Seja qual for o espaço, olha para a cor a meio caminho. Se for cinzenta ou um matiz que não esperavas, muda o espaço ou acrescenta uma paragem.

A interpolação é só uma parte de uma boa mistura; o sítio onde ficam as paragens importa tanto como ela, e isso está em paragens de cor de gradientes. Se preferires saltar a matemática, os Marks do Gradiently são fundos de gradiente acabados que se renderizam em todos os tamanhos em que desenhas, e a documentação para programadores mostra como o ChatGPT ou o Claude podem pesquisar Marks e criar designs que abrem no Studio.