# Por que alguns gradientes ficam cinza no meio e como evitar

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

Azul e amarelo deveriam formar um gradiente lindo. Misture do jeito padrão e você ganha uma mancha cinza no meio. Veja exatamente por quê e quatro formas de manter toda mistura limpa.

## The short version

- Um gradiente sujo é aquele que fica cinza, marrom ou apagado onde as cores se encontram, em vez de continuar vivo de ponta a ponta.
- A causa é a mistura no espaço de cor sRGB, em que o ponto médio entre duas cores opostas, como azul e amarelo, é um cinza chapado.
- Misturar em OKLCH preserva a intensidade da cor porque o caminho contorna o círculo de matizes em vez de atravessar o cinza.
- Uma parada no meio escolhida à mão, como verde-azulado entre azul e amarelo, resolve o problema em qualquer ferramenta e formato.
- Matizes vizinhos no círculo cromático quase nunca ficam sujos, e é por isso que os gradientes análogos são os mais seguros de criar.

Um **gradiente sujo** é uma mistura que fica cinza, marrom ou apagada no meio, mesmo que as duas cores sejam vivas. Isso acontece porque a maioria das ferramentas mistura as cores no espaço de cor sRGB, combinando os valores de vermelho, verde e azul em linha reta. Quando as duas cores ficam em lados opostos do círculo cromático, essas linhas retas se encontram perto do cinza. A solução é escolher o caminho que a mistura percorre: acrescentar uma cor no meio, misturar em OKLCH ou usar matizes mais próximos.

## Por que cores opostas ficam cinza

Veja os números. O azul puro é vermelho 0, verde 0, azul 255. O amarelo puro é vermelho 255, verde 255, azul 0. No meio do caminho, todos os canais caem em cerca de 128, que é `#808080`: um cinza médio. O mesmo acontece com vermelho e ciano, laranja e azul-celeste ou qualquer outro par complementar. Matematicamente, a linha reta entre eles passa bem no eixo do cinza.

- Azul ao amarelo em sRGB: `linear-gradient(90deg, #0000ff, #ffff00)`
- Vermelho ao ciano em sRGB: `linear-gradient(90deg, #ff0000, #00ffff)`
- Laranja ao azul-celeste em sRGB: `linear-gradient(90deg, #ff8000, #0080ff)`

Três pares complementares misturados do jeito padrão. Todos passam pelo mesmo cinza chapado no meio.

Um segundo problema, mais sutil, é a queda escura. Azul ao vermelho em sRGB passa por `#800080`, um roxo mais escuro que as duas pontas, então o meio da mistura parece um hematoma. As cores não são opostas, mas a mistura ainda perde brilho onde elas se encontram.

## Solução 1: acrescente uma parada no meio

A solução mais simples funciona em qualquer ferramenta e formato: escolha a cor que você quer no meio e coloque-a lá você mesmo. Escolha uma cor viva e saturada que fique entre as duas pontas no círculo cromático. Entre azul e amarelo, é o verde-azulado ou o verde. Entre laranja e azul, um rosa segue o caminho quente, o mesmo que a maioria dos gradientes de pôr do sol usa.

- Azul, verde-azulado, amarelo: `linear-gradient(90deg, #0000ff, #14b8a6 50%, #ffff00)`
- Laranja, rosa, azul-celeste: `linear-gradient(90deg, #ff8000, #ec4899 50%, #0080ff)`
- Vermelho, violeta, ciano: `linear-gradient(90deg, #ff0000, #8b5cf6 50%, #00ffff)`

Os mesmos três pares com uma parada no meio escolhida à mão. Nenhum cinza em lugar nenhum.

## Solução 2: misture em OKLCH

O OKLCH descreve a cor como luminosidade, croma (intensidade) e matiz e foi projetado para que passos iguais pareçam mudanças iguais para as pessoas. Misturar em OKLCH mantém o croma alto e contorna o círculo de matizes em vez de cortá-lo em linha reta, então a mistura nunca desaba no cinza. No CSS, você pede isso com uma única expressão. Também dá para escolher para que lado do círculo ir.

```css
/* Default for hex colours: sRGB, grey in the middle */
.muddy   { background: linear-gradient(90deg, #0000ff, #ffff00); }

/* OKLCH, shorter way round the wheel: through teal and green */
.clean   { background: linear-gradient(90deg in oklch, #0000ff, #ffff00); }

/* OKLCH, longer way round: through magenta, red and orange */
.sunset  { background: linear-gradient(90deg in oklch longer hue, #0000ff, #ffff00); }

/* OKLab: straight line, but with even lightness */
.even    { background: linear-gradient(90deg in oklab, #0000ff, #ffff00); }
```

As palavras-chave de interpolação fazem parte do CSS Color Level 4 e funcionam nas versões atuais dos principais navegadores.

- OKLCH: pelo verde-azulado: `linear-gradient(90deg in oklch, #0000ff, #ffff00)`
- OKLCH longer hue: pelo magenta: `linear-gradient(90deg in oklch longer hue, #0000ff, #ffff00)`
- OKLab: uniforme, ainda suave: `linear-gradient(90deg in oklab, #0000ff, #ffff00)`

Azul ao amarelo de mais três jeitos. O OKLab uniformiza a luminosidade, mas ainda suaviza os opostos em direção ao cinza; o OKLCH mantém a cor.

Também vale conhecer o OKLab. Ele é o padrão da sintaxe moderna de cor no CSS e dá misturas suaves e uniformes, mas como ainda segue em linha reta, os opostos verdadeiros perdem intensidade no meio. Use o OKLab para cores que já são próximas; use o OKLCH ou uma parada no meio para cores distantes. Para a sintaxe completa, veja [gradientes OKLCH em CSS](https://gradiently.design/pt-br/guide/css-gradient-oklch) ou explore o espaço em [oklch.com](https://oklch.com).

## Solução 3: escolha matizes mais próximos

O jeito mais confiável de evitar a sujeira é não pedir por ela. Cores vizinhas no círculo, como azul e violeta ou laranja e rosa, se misturam bem em qualquer espaço de cor porque a linha reta entre elas nunca passa perto do cinza. É por isso que as [cores análogas](https://gradiently.design/pt-br/guide/analogous-colors) formam os gradientes mais seguros e por que os pares complementares pedem cuidado; veja as [cores complementares](https://gradiently.design/pt-br/guide/complementary-colors).

| Par | Resultado padrão | Ponte limpa |
| --- | --- | --- |
| Azul e amarelo | Cinza chapado | Verde-azulado `#14b8a6` ou verde `#22c55e` |
| Laranja e azul | Marrom acinzentado | Rosa `#ec4899` ou violeta `#8b5cf6` |
| Roxo e verde | Azul-acinzentado apagado | Azul `#0ea5e9` |
| Vermelho e ciano | Cinza chapado | Violeta `#8b5cf6` |
| Rosa e verde | Bege sujo | Amarelo-claro `#fde68a` ou lavanda `#c4b5fd` |
| Azul e vermelho | Queda para roxo escuro | Magenta vivo `#d946ef` |

Pares comuns que ficam sujos por padrão e uma cor de meio que os mantém limpos.

## Solução 4: cuide da luminosidade

Sujeira não é só cinza. Uma mistura também pode parecer apagada quando a luminosidade cai no meio ou quando uma ponta é muito mais escura que a outra e a transição acontece numa faixa estreita. Mantenha a luminosidade das paradas mais ou menos parecida, ou mude-a de forma constante numa direção, e dê espaço à transição. Uma parada em 40% ou 60% costuma parecer mais natural do que um 50% mecânico.

### Fica sujo

- Cores opostas sem nada entre elas
- Uma ponta clara e uma escura se encontrando numa faixa estreita
- Muitas cores sem relação numa mistura
- Confiar na mistura padrão para pares complementares

### Fica limpo

- Uma cor viva escolhida para o ponto médio
- Mistura em OKLCH para matizes distantes
- Matizes vizinhos mais um destaque
- Conferir o ponto médio isolado antes de publicar

A sujeira piora nos [gradientes mesh](https://gradiently.design/pt-br/guide/mesh-gradients), em que várias cores se encontram ao mesmo tempo. As mesmas regras valem para cada sobreposição: mantenha os vizinhos próximos e coloque uma ponte entre os opostos.

Se você prefere começar de uma mistura que já está equilibrada, pesquise no Mercado com palavras de cor como “azul e amarelo” ou “verde-azulado profundo” e crie com qualquer Mark que encontrar.

## FAQ

### Por que o meu gradiente fica cinza no meio?

As suas cores são quase opostas no círculo cromático e estão sendo misturadas em sRGB, onde o ponto médio entre opostos é cinza.

### Como corrijo um gradiente sujo?

Acrescente uma parada viva no meio entre as duas cores, misture em OKLCH em vez de sRGB ou escolha cores mais próximas no círculo cromático.

### O que significa in oklch num gradiente CSS?

Diz ao navegador para misturar as cores no espaço de cor OKLCH, que preserva a intensidade e contorna o círculo de matizes em vez de passar pelo cinza.

### OKLab ou OKLCH: qual é melhor para gradientes?

O OKLab dá misturas uniformes e suaves para cores próximas. O OKLCH é melhor para matizes distantes porque preserva a intensidade deles.

### Quais combinações de cores nunca ficam sujas?

Matizes vizinhos, como azul e violeta ou laranja e rosa, se misturam bem em quase qualquer espaço de cor.