Cores de gradiente em CSS: por que o gradiente fica cinza no meio e 3 jeitos de consertar
Misture azul com amarelo e o meio fica cinza, porque cores hex se misturam em RGB. Adicione uma parada no meio, misture em OKLCH ou escolha vizinhas no círculo cromático. Cinco gradientes prontos incluídos.
Um gradiente fica cinza no meio porque o navegador mistura cores hex em RGB, e duas cores opostas se anulam no meio do caminho. A solução é dar ao meio uma cor de propósito, ou mudar como a mistura é calculada. Aqui estão três soluções e cinco gradientes para você colar.
Por que o meio fica cinza
Olhe para um gradiente que parece barrento e ignore as pontas. As pontas estão ótimas. Você mesmo as escolheu. O meio é a parte que ninguém escolheu.
Um gradiente é uma mistura, e mistura precisa de matemática. Cores hex são valores RGB, então, por padrão, o navegador as mistura canal por canal.
No meio entre azul e amarelo, o vermelho fica no meio entre 0 e 255, o verde fica no meio entre 0 e 255, e o azul fica no meio entre 255 e 0. Todos os canais caem perto de 128. Vermelho, verde e azul iguais é a definição de cinza.
#0000FF para #FFFF00
Com uma parada no meio #0EBAAE
Isso não é o seu monitor nem um problema de compressão. É aritmética, e aparece sempre que as duas cores estão distantes no círculo cromático. Azul e amarelo são quase opostos exatos, o pior caso.
Solução 1: adicione uma parada no meio
A solução mais direta é parar de deixar o meio ao acaso. Adicione uma terceira parada de cor em 50% com uma cor que você escolheu.
background: linear-gradient(90deg, #0000FF, #0EBAAE, #FFFF00);
#0EBAAE é um azul-petróleo que fica entre azul e amarelo em cor percebida. A mistura agora vai de azul para azul-petróleo, depois de azul-petróleo para amarelo, e nenhuma das metades cruza o cinza.
Funciona em todos os navegadores e não exige sintaxe nova, então é a escolha segura para um design que precisa ficar igual em qualquer lugar. Escolha a cor do meio a olho, depois confira ao lado das duas pontas. O custo é que agora você cuida de três cores em vez de duas.
Solução 2: misture em OKLCH
A outra solução muda a matemática em vez de adicionar uma cor. O CSS permite escolher o espaço de cor em que a mistura acontece, e o OKLCH descreve cor como luminosidade, croma e matiz. Croma é o quão colorida uma cor é, então uma mistura que preserva o croma continua colorida.
background: linear-gradient(in oklch, #0000FF, #FFFF00);
Com in oklch, o navegador viaja ao redor do círculo cromático, passando por verdes e azuis-petróleo, em vez de cortar reto pelo centro cinza. Você mantém duas cores e o código continua curto. A MDN documenta isso como o método de interpolação de cor dentro da função de gradiente, e cores hex legadas só usam RGB quando você não escolhe nenhum, para manter compatibilidade com páginas antigas.
Duas coisas para saber. Algumas das cores desse trajeto podem cair fora do que uma tela consegue mostrar, então os navegadores as cortam para o valor exibível mais próximo. E a rota escolhida é o caminho mais curto ao redor do círculo, então confira se o percurso é um que você gosta. Nosso guia sobre cor OKLCH no CSS moderno explica o espaço com mais profundidade.
Solução 3: escolha vizinhas
A terceira solução não mexe no código. Ela escolhe cores que não conseguem se anular.
#0066FF para #FF8800
#6440E0 para #E040A0
Cores opostas se misturam em cinza. Vizinhas se misturam em algo entre elas que ainda é cor. Se uma marca combina dois opostos, você ainda pode usá-los num gradiente: coloque uma parada no meio entre eles, ou misture em OKLCH.
Azul para laranja, mistura padrão
Azul para laranja, em oklch
Como conferir o seu próprio gradiente
- Olhe para o meio, não para as pontas.
- Dê nome à cor que você vê ali. Se o nome for cinza, marrom ou lama, como #808080 ou #807780, esse é o problema.
- Escolha uma das soluções acima e compare as duas versões lado a lado.
Um gradiente é tão bom quanto o seu pior ponto, e o pior ponto quase sempre é o meio.
Cinco gradientes para roubar
Cada um foi verificado para ter um meio que continua colorido. O primeiro tem uma parada no meio embutida. Os outros quatro usam matizes vizinhos. Toque em um código para copiar.
| Gradiente | Início | Meio | Fim | Por que funciona |
|---|---|---|---|---|
| Azul, azul-petróleo, amarelo | #0000FF | #0EBAAE | #FFFF00 | Pontas opostas, salvas por uma parada real no meio |
| Violeta para rosa | #6440E0 | nenhum | #E040A0 | Vizinhas no círculo |
| Azul para azul-petróleo | #2F5BEA | nenhum | #14B8A6 | Vizinhas no círculo |
| Laranja para rosa choque | #FF7A00 | nenhum | #FF2E93 | Vizinhas no círculo |
| Verde para lima | #00A86B | nenhum | #C6F432 | Vizinhas no círculo |
Entregue isto ao seu desenvolvedor
.gradient-sunrise { background: linear-gradient(90deg, #0000FF, #0EBAAE, #FFFF00); }
.gradient-violet { background: linear-gradient(90deg, #6440E0, #E040A0); }
.gradient-ocean { background: linear-gradient(90deg, #2F5BEA, #14B8A6); }
.gradient-sunset { background: linear-gradient(90deg, #FF7A00, #FF2E93); }
.gradient-meadow { background: linear-gradient(90deg, #00A86B, #C6F432); }
/* Two opposite colors, no middle stop: choose the blend space instead. */
.gradient-opposites { background: linear-gradient(in oklch, #0066FF, #FF8800); }
Se um navegador não entender in oklch, ele ignora a declaração inteira. Escreva primeiro uma linha linear-gradient(...) simples como fallback, depois a linha em OKLCH logo após.
FAQ
Por que meu gradiente fica cinza no meio?
Cores hex se misturam em RGB, e duas cores distantes no círculo cromático dão a média cinza. Azul #0000FF e amarelo #FFFF00 se encontram em #808080.
Como evito que um gradiente CSS pareça barrento?
Adicione uma parada de cor no meio com cor de verdade, misture em OKLCH com linear-gradient(in oklch, ...), ou escolha duas cores vizinhas no círculo cromático.
O que "in oklch" faz em um gradiente CSS?
Ele diz ao navegador para misturar as cores no espaço de cor OKLCH em vez de RGB, então o meio mantém a cor em vez de cair para o cinza.
Quais cores de gradiente combinam bem?
Vizinhas no círculo cromático, como violeta #6440E0 para rosa #E040A0 ou verde #00A86B para lima #C6F432. A mistura delas continua vibrante o caminho todo.
Todos os navegadores suportam gradientes em OKLCH?
Os navegadores modernos suportam, mas um que não suporte vai descartar a declaração. Adicione uma linha de gradiente simples antes dela como fallback.
Por que azul para amarelo vira cinza e não verde?
Porque a mistura toma o caminho reto pelo RGB, onde a média das duas é cinza. Um meio verde só aparece se você o adicionar como parada ou misturar em OKLCH.
Fontes
- CSS Color Module Level 4, interpolation: cores sRGB legadas, como hex, interpolam em sRGB por padrão, e outros espaços são escolhidos com o método de interpolação de cor.
- MDN, linear-gradient(): a sintaxe
<color-interpolation-method>,in oklch. - MDN, OKLCH color: luminosidade, croma e matiz.
- O ponto médio de (0, 0, 255) e (255, 255, 0) é (127,5, 127,5, 127,5), que é #808080 com croma OKLCH 0. Os pontos médios de #0066FF para #FF8800 (#807780) e de #6440E0 para #E040A0 (#A240C0) foram calculados em sRGB por nós. As barras desta página foram renderizadas a partir desses cálculos, e a barra em OKLCH corta as cores fora da faixa da tela, como os navegadores fazem.
- Publicado originalmente como carrossel no UX Brainy.
Want gradients, color and every other detail designed as one system? Our team designs and builds product UI that holds up on every screen.
Get Started
