# Porque é que alguns gradientes ficam cinzentos ao meio e como o evitar

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

Azul e amarelo deviam dar um gradiente lindo. Mistura-os da forma por omissão e ficas com uma mancha cinzenta ao meio. Eis exatamente porquê, e quatro formas de manter todas as misturas limpas.

## The short version

- Um gradiente turvo é aquele que fica cinzento, castanho ou baço onde as cores se encontram, em vez de se manter vivo de uma ponta à outra.
- A causa é a mistura no espaço de cor sRGB, onde o ponto a meio caminho entre duas cores opostas, como azul e amarelo, é um cinzento liso.
- Misturar em OKLCH mantém a intensidade da cor porque dá a volta ao círculo cromático em vez de atravessar o cinzento.
- Uma paragem intermédia escolhida à mão, como azul-petróleo entre azul e amarelo, corrige o turvo em qualquer ferramenta e em qualquer formato.
- Os matizes vizinhos no círculo cromático quase nunca ficam turvos, e é por isso que os gradientes análogos são os mais seguros de desenhar.

Um **gradiente turvo** é uma mistura que fica cinzenta, castanha ou baça ao meio, mesmo quando as suas duas cores são vivas. 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 estão em lados opostos do círculo cromático, essas linhas retas encontram-se perto do cinzento. A solução é escolher o caminho que a mistura faz: acrescentar uma cor ao meio, misturar em OKLCH ou usar matizes mais próximos.

## Porque é que as cores opostas ficam cinzentas

Olha para os números. O azul puro é vermelho 0, verde 0, azul 255. O amarelo puro é vermelho 255, verde 255, azul 0. A meio caminho, todos os canais ficam em cerca de 128, que é `#808080`: um cinzento 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 mesmo pelo eixo dos cinzentos.

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

Três pares complementares misturados da forma por omissão. Todos passam pelo mesmo cinzento liso ao meio.

Um segundo problema, mais subtil, é a quebra escura. Azul a vermelho em sRGB passa por `#800080`, um roxo mais escuro do que qualquer das pontas, por isso o meio da mistura parece uma nódoa negra. As cores não são opostas, mas a mistura perde luminosidade onde se encontram.

## Solução 1: acrescenta uma paragem intermédia

A solução mais simples funciona em todas as ferramentas e em todos os formatos: escolhe a cor que queres ao meio e coloca-a lá tu mesmo. Escolhe uma cor viva e saturada que fique entre as duas pontas no círculo cromático. Entre azul e amarelo, é azul-petróleo ou verde. Entre laranja e azul, um rosa leva o caminho quente, o que a maioria dos gradientes de pôr do sol usa.

- Azul, azul-petróleo, 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 paragem intermédia escolhida à mão. Nenhum cinzento em lado nenhum.

## Solução 2: mistura em OKLCH

O OKLCH descreve a cor como luminosidade, croma (intensidade) e matiz, e foi pensado para que passos iguais pareçam mudanças iguais às pessoas. Misturar em OKLCH mantém o croma elevado e dá a volta ao círculo cromático em vez de o cortar a direito, por isso a mistura nunca cai no cinzento. Em CSS, pedes isso com uma expressão. Também podes escolher para que lado dar a volta ao círculo.

```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 azul-petróleo: `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 a amarelo de mais três formas. O OKLab uniformiza a luminosidade mas ainda suaviza os opostos em direção ao cinzento; o OKLCH mantém a cor.

Também vale a pena conhecer o OKLab. É o padrão da sintaxe de cor moderna do CSS e dá misturas suaves e uniformes, mas como continua a viajar em linha reta, os verdadeiros opostos perdem intensidade ao meio. Usa o OKLab para cores que já estão próximas; usa o OKLCH ou uma paragem intermédia para cores afastadas. Para a sintaxe completa, vê [gradientes OKLCH em CSS](https://gradiently.design/pt-pt/guide/css-gradient-oklch), ou explora o espaço em [oklch.com](https://oklch.com).

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

A forma mais fiável de evitar o turvo é não o pedir. As cores que ficam lado a lado no círculo, como azul e violeta ou laranja e rosa, misturam-se de forma limpa em qualquer espaço de cor, porque a sua linha reta nunca passa perto do cinzento. É por isso que as [cores análogas](https://gradiently.design/pt-pt/guide/analogous-colors) dão os gradientes mais seguros, e porque os pares complementares pedem cuidado; vê [cores complementares](https://gradiently.design/pt-pt/guide/complementary-colors).

| Par | Resultado por omissão | Ponte limpa |
| --- | --- | --- |
| Azul e amarelo | Cinzento liso | Azul-petróleo `#14b8a6` ou verde `#22c55e` |
| Laranja e azul | Cinzento acastanhado | Rosa `#ec4899` ou violeta `#8b5cf6` |
| Roxo e verde | Cinzento-azulado baço | Azul `#0ea5e9` |
| Vermelho e ciano | Cinzento liso | Violeta `#8b5cf6` |
| Rosa e verde | Bege turvo | Amarelo-pálido `#fde68a` ou lavanda `#c4b5fd` |
| Azul e vermelho | Quebra roxa escura | Magenta vivo `#d946ef` |

Pares comuns que ficam turvos por omissão e uma cor intermédia que os mantém limpos.

## Solução 4: atenção à luminosidade

O turvo não é só cinzento. Uma mistura também pode parecer baça quando a sua luminosidade cai ao meio, ou quando uma ponta é muito mais escura do que a outra e a transição acontece numa faixa estreita. Mantém a luminosidade das paragens mais ou menos igual, ou muda-a de forma constante numa direção, e dá espaço à transição. Uma paragem a 40% ou 60% parece muitas vezes mais natural do que uns mecânicos 50%.

### Fica turvo

- Cores opostas sem nada entre elas
- Uma ponta clara e uma escura a encontrarem-se numa faixa estreita
- Muitas cores sem relação numa só mistura
- Confiar na mistura por omissão para pares complementares

### Fica limpo

- Uma cor viva escolhida para o ponto médio
- Misturar em OKLCH para matizes afastados
- Matizes vizinhos mais um acento
- Verificar o ponto médio isolado antes de publicar

O turvo agrava-se nos [gradientes de malha](https://gradiently.design/pt-pt/guide/mesh-gradients), onde várias cores se encontram ao mesmo tempo. As mesmas regras aplicam-se a cada sobreposição: mantém as vizinhas próximas e põe uma ponte entre as opostas.

Se preferires partir de uma mistura que já está equilibrada, pesquisa no Mercado por palavras de cor como “azul e amarelo” ou “azul-petróleo profundo” e cria com qualquer Mark que encontres.

## FAQ

### Porque é que o meu gradiente parece cinzento ao meio?

As tuas cores estão quase opostas no círculo cromático e estão a ser misturadas em sRGB, onde o ponto a meio caminho entre opostos é cinzento.

### Como corrijo um gradiente turvo?

Acrescenta uma paragem intermédia viva entre as duas cores, mistura em OKLCH em vez de sRGB ou escolhe 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 mantém a intensidade da cor e dá a volta ao círculo cromático em vez de passar pelo cinzento.

### O OKLab ou o OKLCH é melhor para gradientes?

O OKLab dá misturas uniformes e suaves para cores próximas. O OKLCH é melhor para matizes afastados porque mantém a sua intensidade.

### Que combinações de cores nunca ficam turvas?

Os matizes vizinhos, como azul e violeta ou laranja e rosa, misturam-se de forma limpa em quase qualquer espaço de cor.