Interpolação de gradiente: sRGB, OKLab e por que isso importa

Interpolação de gradiente é a forma como as cores entre as paradas são calculadas. Você escolhe azul em uma ponta e amarelo na outra; o software precisa inventar cada cor no meio, e faz isso traçando uma linha entre as duas cores em algum espaço de cor. O espaço usado muda o que você vê. Misture em sRGB e o azul até o amarelo passa por um cinza chapado. Misture em OKLCH e ele passa por um verde-azulado vivo. Mesmas paradas, gradientes bem diferentes.

O que significa interpolação de gradiente

Toda cor pode ser descrita como um ponto em um espaço. No sRGB os três eixos são vermelho, verde e azul. No OKLab são a luminosidade e dois eixos opostos, verde a vermelho e azul a amarelo. No OKLCH são luminosidade, croma (o quanto a cor é intensa) e matiz (o ângulo no círculo). Interpolar significa caminhar de um ponto ao outro. Um caminho reto em um espaço pode virar uma curva, ou um desvio pelo cinza, em outro.

sRGB, OKLab e OKLCH lado a lado

Por que gradientes em sRGB ficam cinzas ou sujos

O sRGB foi criado para telas, não para os olhos. Seus números têm codificação gama, e seus eixos não acompanham a forma como percebemos matiz ou luminosidade. Quando duas cores estão em lados opostos do círculo, a linha reta entre elas passa perto do centro neutro, e o meio perde a cor. Azul e amarelo dão a média #808080. Essa é a principal causa dos gradientes sujos, e é por isso que o instinto de designer de adicionar uma cor de ponte funciona: a parada extra desvia o caminho do cinza.

OKLab: passos uniformes para os olhos

O OKLab, publicado por Björn Ottosson em 2020, foi construído 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 bojo claro no meio. Ele ainda segue um caminho reto, então dois opostos verdadeiros perdem um pouco de cor no centro, mas bem menos que no sRGB. O CSS moderno usa OKLab por padrão sempre que alguma cor do gradiente está escrita numa sintaxe mais nova, como oklch().

OKLCH: mantendo a cor viva

O OKLCH é o mesmo espaço do OKLab, descrito em forma polar: luminosidade, croma e um ângulo de matiz. Interpolar nele dá a volta no círculo, então as cores intermediárias mantêm a saturação. Isso é ideal para gradientes vivos, que colocam a marca em primeiro plano, e para gradientes arco-íris. Você também pode escolher para que lado girar no círculo com shorter hue (o padrã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 gradiente no CSS

Adicione in <espaço> antes das paradas, depois de qualquer ângulo ou forma. Navegadores que não entendem a sintaxe ignoram a declaração inteira, então escreva antes uma versão em sRGB como alternativa. Todos os espaços e palavras-chave de matiz estão na referência de interpolação de cor do MDN, e gradientes CSS em OKLCH traz 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);
}

Qual espaço de cor escolher

1. 1

   Comece pelo OKLab

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

2. 2

   Use OKLCH para cores distantes ou vivas

   Quando as cores estão longe uma da outra no círculo e você quer que o meio continue brilhante.

3. 3

   Mantenha o sRGB para igualar trabalhos antigos

   Se um gradiente precisa ficar idêntico a um arquivo ou imagem existente, misture no mesmo espaço em que ele foi feito.

4. 4

   Confira o ponto médio

   Seja qual for o espaço, olhe a cor do meio do caminho. Se ela estiver cinza ou num matiz que você não esperava, troque o espaço ou adicione uma parada.

A interpolação é só uma parte de uma boa mistura; onde as paradas ficam importa tanto quanto, e isso está em paradas de cor do gradiente. Se você preferir pular a matemática, os Marks do Gradiently são fundos em gradiente prontos que renderizam em qualquer tamanho em que você criar, e a documentação para desenvolvedores mostra como o ChatGPT ou o Claude podem buscar Marks e criar designs que abrem no Studio.