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

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.

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.

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.

/* 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 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, ou explora o espaço em 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 dão os gradientes mais seguros, e porque os pares complementares pedem cuidado; vê cores complementares.

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

O turvo agrava-se nos gradientes de malha, 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.