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

[Canonical HTML page](https://gradiently.design/pt-br/guide/css-gradient-oklch)

A maioria dos gradientes sem graça, com o meio cinza, não é um problema de cor, mas de matemática. Duas palavras, in oklch, mudam onde o navegador faz a conta.

## The short version

- Os gradientes CSS se misturam em sRGB por padrão quando todas as cores são escritas em hex, rgb() ou hsl(), o que muitas vezes deixa o meio da mistura sem graça ou cinza.
- Acrescentar in oklch ou in oklab a um gradiente diz ao navegador para misturar em um espaço de cor perceptual, que mantém a luminosidade uniforme e as cores limpas.
- O in oklab toma o caminho mais reto entre duas cores, enquanto o in oklch percorre o círculo de matizes e mantém a saturação alta.
- Palavras-chave de matiz como shorter hue, longer hue, increasing hue e decreasing hue escolhem por qual lado um gradiente oklch percorre o círculo cromático.
- Os navegadores ignoram declarações que não conseguem interpretar, então escrever um gradiente sRGB primeiro e a versão oklch depois é uma alternativa segura.

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.

- sRGB (padrão para hex): `linear-gradient(90deg, #2563eb, #facc15)`
- in oklab: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- in oklch: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Azul a amarelo de três jeitos. O sRGB passa pelo cinza; o oklab fica limpo e neutro; o oklch mantém a cor plena percorrendo o turquesa e o verde.

## 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](https://gradiently.design/pt-br/guide/muddy-gradients).

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.

```css
/* 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);
```

Só a mistura muda; as paradas de cor continuam como foram escritas.

| Espaço de cor | Como mistura | Use para |
| --- | --- | --- |
| `srgb` | Tira a média de vermelho, verde e azul | Reproduzir designs antigos com exatidão |
| `srgb-linear` | Tira a média da luz física | Efeitos de mistura de luz; pontos médios ficam claros |
| `oklab` | Linha reta por um espaço perceptual | A maioria das misturas e qualquer degradê para branco, preto ou cinza |
| `oklch` | Em torno do círculo de matizes com croma constante | Misturas vivas de vários matizes, arco-íris, pores do sol |
| `hsl` | Em torno do círculo de matizes, não perceptual | Círculos de cores; a luminosidade é irregular |

Os espaços que você mais provavelmente vai usar. A [página color-interpolation-method do MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method) lista todos.

## 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.

- Rosa a turquesa, em oklab: `linear-gradient(90deg in oklab, #db2777, #0891b2)`
- Rosa a turquesa, em oklch: `linear-gradient(90deg in oklch, #db2777, #0891b2)`
- Índigo a branco, em oklab: `linear-gradient(90deg in oklab, #1e1b4b, #ffffff)`
- Violeta a laranja, em oklch: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

O oklab fica no caminho direto; o oklch varre os matizes entre seus extremos: rosa a turquesa passa por violeta e azul, violeta a laranja por magenta e vermelho.

> **Degradê para branco, preto ou cinza** Cores neutras não têm matiz de verdade, então uma mistura oklch para branco ou preto pode fazer um caminho estranho. Para degradês até um neutro, use `in oklab` ou escreva a ponta neutra como um quase neutro com o mesmo matiz da outra ponta, como `oklch(97% 0.02 290)`.

## 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.

- Vermelho a azul, shorter hue: `linear-gradient(90deg in oklch shorter hue, #ef4444, #3b82f6)`
- Vermelho a azul, longer hue: `linear-gradient(90deg in oklch longer hue, #ef4444, #3b82f6)`

O caminho curto do vermelho ao azul passa por magenta e violeta. O caminho longo passa por laranja, amarelo, verde e ciano.

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](https://gradiently.design/pt-br/guide/rainbow-gradient) 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](https://oklch.com) é um bom seletor para achar valores.

```css
.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)
  );
}
```

Violeta, coral e âmbar com uma só luminosidade: nenhuma parada se destaca como mais brilhante que as outras.

Luminosidade igual: violeta, coral, âmbar: `linear-gradient(90deg in oklch, oklch(68% 0.17 300), oklch(68% 0.17 20), oklch(68% 0.17 70))`

O código acima, renderizado. As cores fora da gama de uma tela são levadas à cor mais próxima que ela consegue mostrar.

## 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.

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

Cor lisa, depois sRGB, depois oklch. Cada navegador fica com a última linha que entende.

Se quiser ir além, as misturas perceptuais combinam bem com grão para evitar o [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) e com as técnicas de parada e de dica do guia de [gradiente linear em CSS](https://gradiently.design/pt-br/guide/css-linear-gradient).

## FAQ

### O que o in oklch faz em um gradiente CSS?

Faz o navegador calcular as cores intermediárias no espaço de cor OKLCH, que mantém a luminosidade uniforme e as cores saturadas em vez de misturar passando pelo cinza.

### Devo usar oklab ou oklch em gradientes?

Use oklch para misturas vivas entre matizes diferentes e oklab para degradês até branco, preto ou cinza, ou quando você não quer que a mistura passe por matizes extras.

### Por que meu gradiente oklch passa pelo verde?

O OKLCH percorre o círculo de matizes, e entre azul e amarelo o caminho mais curto passa pelo verde. Use `in oklab` para um caminho direto ou acrescente uma parada intermediária.

### Preciso escrever as cores em oklch() para usar a interpolação oklch?

Não. Cores hex funcionam bem com `in oklch`; só a mistura muda. Escrever as paradas em `oklch()` é útil quando você quer controlar a luminosidade com precisão.

### O que acontece em navegadores que não aceitam in oklch?

Eles ignoram a declaração inteira. Ponha um gradiente sRGB normal na linha anterior e esses navegadores ficam com ele.