Resumindo
- 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.
Nesta página
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.
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.
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.
/* 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); }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 ou explore o espaço em 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 formam os gradientes mais seguros e por que os pares complementares pedem cuidado; veja as cores complementares.
| 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 |
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, 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.
Perguntas frequentes
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.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
