Gradiente CSS com OKLCH: interpolação para misturas mais suaves

A interpolação OKLCH em gradientes CSS significa pedir ao navegador que calcule as cores intermediárias de um gradiente no espaço de cor OKLCH em vez de no sRGB. Você acrescenta duas palavras depois da direção: linear-gradient(90deg in oklch, #2563eb, #facc15). O resultado é uma mistura cuja luminosidade muda de forma uniforme e cujo meio continua vivo, em vez de afundar na faixa cinza e turva que as misturas em sRGB simples costumam ter.

Por que os gradientes em sRGB ficam cinza

O sRGB foi criado para codificar cores de tela com eficiência, não para corresponder ao jeito como as pessoas veem. Misturar duas cores sRGB significa tirar a média dos números de vermelho, verde e azul delas, e o meio entre um azul e um amarelo é um conjunto de números medianos que parece cinza. A luminosidade também muda de forma irregular, então algumas misturas ficam mais claras ou mais escuras no meio. O lado de design desse problema está em gradientes turvos.

O Oklab e sua forma cilíndrica, o OKLCH, foram criados para que passos iguais em seus números pareçam passos mais ou menos iguais ao olho. Misturar neles mantém a luminosidade percebida se movendo de forma constante, e é por isso que gradientes feitos assim parecem mais suaves e mais brilhantes com os mesmos extremos.

A sintaxe: in oklch e in oklab

O método de interpolação vai no primeiro argumento, antes ou depois da direção. Funciona em linear-gradient(), radial-gradient(), conic-gradient() e nas formas repetidas deles, e também em color-mix(). Suas paradas de cor podem continuar em hex; só a matemática muda.

/* direction first or interpolation first: both are valid */
background: linear-gradient(135deg in oklch, #7c3aed, #f97316);
background: linear-gradient(in oklch 135deg, #7c3aed, #f97316);

/* works in the other gradient functions too */
background: radial-gradient(in oklab circle at 30% 30%, #22d3ee, #1e1b4b);
background: conic-gradient(in oklch from 90deg, #ef4444, #3b82f6, #ef4444);

oklab ou oklch: qual escolher

Os dois são perceptuais; diferem no caminho que tomam. O Oklab traça uma linha reta entre as duas cores, então o meio pode perder saturação quando os extremos ficam longe no círculo cromático, mas nunca passa por um matiz que você não pediu. O OKLCH mantém o croma, a intensidade da cor, e percorre o círculo de matizes, então o meio continua saturado, mas passa pelos matizes intermediários. Azul a amarelo em oklch passa pelo verde. Às vezes esse é o objetivo; às vezes é uma surpresa.

Escolhendo a direção do matiz

Entre quaisquer dois matizes há dois caminhos pelo círculo cromático. Por padrão, o oklch toma o shorter hue. Você pode pedir longer hue ou forçar uma direção com increasing hue ou decreasing hue. A palavra-chave vai logo depois do espaço de cor.

O longer hue é o jeito mais limpo de desenhar um espectro: duas paradas em vez de sete. É também como você faz um gradiente arco-íris completo cujas cores parecem todas igualmente brilhantes, o que um arco-íris em sRGB nunca consegue.

Escrevendo cores em oklch()

Você também pode escrever as próprias paradas em OKLCH: oklch(L C H), em que L é a luminosidade de 0% a 100%, C é o croma de 0 até cerca de 0,37 e H é o ângulo do matiz. Manter o mesmo L em todas as paradas dá um gradiente de luminosidade igual, o que é difícil de fazer a olho em hex. O oklch.com é um bom seletor para achar valores.

.band {
  /* same lightness and chroma, only the hue changes */
  background: linear-gradient(
    90deg in oklch,
    oklch(68% 0.17 300),
    oklch(68% 0.17 20),
    oklch(68% 0.17 70)
  );
}

Suporte dos navegadores e alternativas

Os métodos de interpolação e as cores oklch() são aceitos nos atuais Chrome, Edge, Safari e Firefox. Os navegadores pulam qualquer declaração que não consigam interpretar, então a alternativa é simplesmente escrever primeiro a versão simples. Onde a linha aprimorada é ignorada, o gradiente sRGB permanece.

.hero {
  background-color: #7c3aed;
  background-image: linear-gradient(135deg, #7c3aed, #f97316);
  background-image: linear-gradient(135deg in oklch, #7c3aed, #f97316);
}

Se quiser ir além, as misturas perceptuais combinam bem com grão para evitar o banding em gradientes e com as técnicas de parada e de dica do guia de gradiente linear em CSS.