Interpolação OKLCH em gradientes CSS para misturas suaves

A interpolação OKLCH em gradientes CSS significa pedir ao navegador que calcule as cores intermédias de um gradiente no espaço de cor OKLCH em vez de em sRGB. Acrescentas duas palavras a seguir à direção: linear-gradient(90deg in oklch, #2563eb, #facc15). O resultado é uma mistura cuja luminosidade muda de forma uniforme e cujo meio se mantém vivo, em vez de descair para a faixa cinzenta e lamacenta pela qual as misturas sRGB simples são conhecidas.

Porque é que os gradientes sRGB ficam cinzentos

O sRGB foi concebido para codificar cores de ecrã de forma eficiente, não para corresponder à forma como as pessoas veem. Misturar duas cores sRGB significa fazer a média dos seus números de vermelho, verde e azul, e a meio caminho entre um azul e um amarelo há um conjunto de números medianos que parece cinzento. A sua luminosidade também muda de forma irregular, por isso algumas misturas ficam mais claras ou mais escuras no meio. O lado de design deste problema está nos gradientes lamacentos.

O Oklab e a sua forma cilíndrica, o OKLCH, foram concebidos para que passos iguais nos seus números pareçam passos aproximadamente iguais ao olho. Misturar neles mantém a luminosidade percebida a mover-se de forma constante, e é por isso que os 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 suas formas repetidas, e também em color-mix(). As tuas paragens de cor podem continuar em hexadecimal; 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

Ambos são perceptuais; diferem no caminho que fazem. O Oklab traça uma linha reta entre as duas cores, por isso o meio pode perder alguma saturação quando os extremos estão longe no círculo cromático, mas nunca passa por um matiz que não pediste. O OKLCH mantém o croma, a intensidade da cor, e percorre o círculo dos matizes, por isso o meio mantém-se saturado mas passa pelos matizes intermédios. Azul a amarelo em oklch passa por verde. Às vezes é esse o objetivo; outras vezes é uma surpresa.

Escolher a direção do matiz

Entre quaisquer dois matizes há duas maneiras de dar a volta ao círculo cromático. Por predefinição o oklch usa o shorter hue. Podes pedir longer hue, ou forçar uma direção com increasing hue ou decreasing hue. A palavra-chave vai logo a seguir ao espaço de cor.

O longer hue é a forma mais limpa de desenhar um espetro: duas paragens em vez de sete. É também como se faz um gradiente arco-íris cujas cores parecem todas igualmente brilhantes, o que um arco-íris em sRGB nunca consegue bem.

Escrever cores em oklch()

Também podes escrever as próprias paragens 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 L igual em todas as paragens dá um gradiente de luminosidade uniforme, o que é difícil de fazer a olho em hexadecimal. O oklch.com é um bom seletor para encontrar 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 nos navegadores e reservas

Os métodos de interpolação e as cores oklch() são suportados nos atuais Chrome, Edge, Safari e Firefox. Os navegadores ignoram qualquer declaração que não consigam interpretar, por isso a reserva é simplesmente escrever primeiro a versão simples. Onde a linha melhorada for ignorada, o gradiente sRGB fica.

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

Se queres ir mais longe, as misturas perceptuais combinam bem com grão para evitar as faixas nos gradientes e com as técnicas de paragens e dicas do guia sobre o gradiente linear em CSS.