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

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

Escolha azul e amarelo, misture os dois, e o meio fica cinza. Não são suas cores falhando. É a matemática do espaço de cor que faz a mistura, e desde o CSS Color 4 você pode trocá-lo.

## The short version

- Interpolação de gradiente é o método usado para calcular cada cor entre duas paradas, e o espaço de cor em que ela acontece muda o resultado.
- Misturar em sRGB segue uma linha reta pelos valores de vermelho, verde e azul, então cores opostas como azul e amarelo passam pelo cinza.
- O OKLab foi criado para que passos iguais pareçam mudanças iguais aos olhos, o que dá uma luminosidade mais suave e uniforme ao longo do gradiente.
- O OKLCH mistura luminosidade, croma e matiz separadamente, então as cores continuam saturadas e dão a volta no círculo cromático em vez de cruzar seu centro cinza.
- No CSS você escolhe o espaço dentro do gradiente, por exemplo `linear-gradient(in oklch, #2563eb, #f97316)`.

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

- Início: azul: #0000ff
- Ponto médio em sRGB: #808080
- Ponto médio, sRGB linear: #bcbcbc
- Ponto médio em OKLab: #6cabc7
- Ponto médio em OKLCH: #00cfbd
- Fim: amarelo: #ffff00

A cor do meio do caminho entre azul puro e amarelo puro em quatro espaços. O sRGB cai num cinza morto; o OKLCH cai num verde-azulado vivo.

## sRGB, OKLab e OKLCH lado a lado

- Azul a laranja, sRGB: `linear-gradient(90deg in srgb, #2563eb, #f97316)`
- Azul a laranja, OKLab: `linear-gradient(90deg in oklab, #2563eb, #f97316)`
- Azul a laranja, OKLCH: `linear-gradient(90deg in oklch, #2563eb, #f97316)`
- Vermelho a azul, sRGB: `linear-gradient(90deg in srgb, #ff0000, #0000ff)`
- Vermelho a azul, OKLab: `linear-gradient(90deg in oklab, #ff0000, #0000ff)`
- Vermelho a azul, OKLCH: `linear-gradient(90deg in oklch, #ff0000, #0000ff)`

Dois pares de cores, três espaços cada. As linhas em sRGB ficam apagadas e escuras no meio; o OKLab equilibra a luminosidade; o OKLCH preserva a cor.

| Espaço | Como mistura | Ideal para | Cuidado com |
| --- | --- | --- | --- |
| sRGB | Linha reta pelos valores de vermelho, verde e azul | Reproduzir designs antigos com exatidão | Meios cinzas e escuros entre matizes distantes |
| sRGB linear | O mesmo, sem codificação gama | Mistura de luz, brilhos | Pontos médios claros demais |
| OKLab | Luminosidade e cor perceptualmente uniformes | Misturas suaves e naturais; o padrão para cores CSS modernas | Cores opostas ainda perdem um pouco de cor |
| OKLCH | Luminosidade, croma e matiz separados | Misturas vivas, arco-íris, cores de marca distantes | Pode passar por matizes inesperados |

Os quatro espaços que você mais vai encontrar. O CSS também oferece outros, como `lab`, `lch`, `hsl` e `display-p3`.

## 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](https://gradiently.design/pt-br/guide/muddy-gradients), 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](https://gradiently.design/pt-br/guide/rainbow-gradient). 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](https://gradiently.design/pt-br/guide/oklch-explained) explica o espaço com mais profundidade.

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

As mesmas duas cores. O caminho mais curto passa pelo magenta; o mais longo passa por laranja, amarelo e verde.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method), e [gradientes CSS em OKLCH](https://gradiently.design/pt-br/guide/css-gradient-oklch) traz mais receitas.

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

A palavra-chave de interpolação funciona em gradientes lineares, radiais e cônicos. Um gradiente cônico de vermelho de volta ao vermelho com `longer hue` desenha um arco-íris completo e uniforme.

## Qual espaço de cor escolher

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

### Hábito antigo

- Misturar em sRGB e adicionar paradas para esconder o cinza
- Aceitar uma queda escura no meio
- Escolher cores próximas para não arriscar

### Melhor

- Misturar em OKLab ou OKLCH e usar menos paradas
- Luminosidade uniforme de ponta a ponta
- Usar pares mais ousados e deixar o espaço mantê-los limpos

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](https://gradiently.design/pt-br/guide/gradient-stops). 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](https://gradiently.design/pt-br/developers) mostra como o ChatGPT ou o Claude podem buscar Marks e criar designs que abrem no Studio.

## FAQ

### O que é interpolação de gradiente?

O cálculo de cada cor entre duas paradas do gradiente. O espaço de cor em que isso acontece, como sRGB ou OKLab, muda quais cores aparecem no meio.

### Por que meus gradientes ficam cinzas no meio?

Eles estão misturando em sRGB cores de lados opostos do círculo, então o caminho passa perto do cinza. Misture em OKLCH ou adicione uma cor de ponte.

### OKLab ou OKLCH é melhor para gradientes?

O OKLab dá as misturas mais uniformes e naturais. O OKLCH mantém as cores mais saturadas e é melhor para pares vivos e arco-íris.

### Como usar OKLCH em um gradiente CSS?

Adicione `in oklch` antes das cores, por exemplo `linear-gradient(90deg in oklch, #2563eb, #f97316)`. Escreva antes uma versão em sRGB como alternativa.

### Qual espaço de cor os gradientes CSS usam por padrão?

sRGB quando todas as cores usam sintaxe antiga, como hex ou `rgb()`, e OKLab quando alguma cor usa uma sintaxe mais nova, como `oklch()`.