# Gradiente amarelo: códigos vivos que não ficam verdes

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

O amarelo é a cor que mais trai um gradiente: uma parada errada e o sol vira lima, ou o dourado vira cáqui. Veja por que isso acontece e um conjunto de códigos que ficam quentes do começo ao fim.

## The short version

- Um gradiente amarelo fica verde quando mistura com ciano, verde-azulado ou azul, porque as cores entre o amarelo e o azul passam pelo verde.
- Amarelos escuros tendem ao oliva e ao cáqui, então aprofunde o amarelo com âmbar, laranja ou marrom em vez de cinza ou preto.
- O amarelo fica mais ensolarado quando as outras paradas pendem para o quente: creme, pêssego, laranja, rosa ou dourado.
- Texto branco quase nunca funciona sobre amarelo; quase preto ou marrom escuro se lê muito melhor.
- Para unir amarelo e azul numa só mistura, ponha branco, rosa ou violeta entre eles para o ponto médio nunca cair no verde.

Um **gradiente amarelo** parece vivo e alegre quando todas as paradas pendem para o quente: creme, manteiga, limão, dourado, laranja. Ele dá errado de duas formas previsíveis. Misture com azul ou verde-azulado e o meio vira verde; escureça com cinza e vira oliva. Mantenha o matiz do lado quente do amarelo, aprofunde com âmbar e não com preto, e ele continua sol de ponta a ponta. Os códigos abaixo seguem essa regra.

## Por que gradientes amarelos ficam verdes ou turvos

O amarelo fica bem ao lado do verde no círculo cromático, bem mais perto do que a maioria imagina. Isso o torna frágil em três situações.

- **Mistura com cores frias.** Entre o amarelo e o ciano, o verde-azulado ou o azul, o navegador precisa passar pelo verde. Uma mistura de amarelo ensolarado com azul-céu ganha uma faixa lima ou sálvia no meio.
- **Escurecer com preto ou cinza.** Nossos olhos leem um amarelo escuro e pouco saturado como oliva ou cáqui, e não como “amarelo escuro”. Não existe amarelo profundo que ainda pareça amarelo.
- **Começar de um limão que já tende ao verde.** Limões ácidos como `#e4f04a` parecem frescos sozinhos, mas puxam toda parada vizinha para o lima.

### Fica verde ou oliva

- Amarelo direto para azul-céu ou verde-azulado
- Amarelo escurecido com cinza ou preto
- Um limão frio como parada mais clara
- Amarelo para verde sem parada quente

### Continua ensolarado

- Amarelo para creme, pêssego, laranja ou rosa
- Amarelo aprofundado com âmbar e marrom
- Um amarelo quente como `#facc15` na parada mais clara
- Branco ou rosa entre o amarelo e o azul

O mesmo problema do meio cinza afeta quaisquer cores opostas, e [gradientes turvos](https://gradiently.design/pt-br/guide/muddy-gradients) trata disso em geral. O amarelo só o mostra primeiro, porque o verde está tão perto.

## Códigos de gradiente amarelo vivo

Estes são os barulhentos: verão, banners de promoção, marcas infantis, festivais, sinalização de aviso bem-feita. Cada um une o amarelo a um parceiro mais quente para haver movimento sem tender ao verde.

- Sorbet de limão: `linear-gradient(135deg, #fef08a 0%, #facc15 100%)`
- Girassol: `linear-gradient(135deg, #fde047 0%, #f59e0b 100%)`
- Amarelo a tangerina: `linear-gradient(120deg, #facc15 0%, #fb923c 100%)`
- Limonada rosa: `linear-gradient(135deg, #fde047 0%, #f472b6 100%)`
- Sol do meio-dia: `radial-gradient(circle at 30% 30%, #fffbeb 0%, #fde047 35%, #f59e0b 100%)`
- Onda de calor: `linear-gradient(180deg, #fef9c3 0%, #fde047 45%, #f97316 100%)`

Seis gradientes de amarelo vivo. Toda cor parceira é mais quente que o amarelo, o que os mantém limpos.

O amarelo vivo cansa em grande quantidade, então use estes em posts e banners, e não num site inteiro. Num story 1080×1920, uma mistura de amarelo que esmaece para laranja embaixo dá ao olhar um lugar para pousar e mantém a parte mais viva perto da área do título, no topo.

## Gradientes de amarelo claro: manteiga e creme

Amarelos pálidos se comportam como papel quente. Dão ótimos fundos para cardápios, convites, newsletters e tudo com muita leitura, porque o texto escuro assenta bem neles. Mantenha ao menos uma parada perto do branco para o amarelo parecer luz e não um tom sobre tudo.

- Papel creme: `linear-gradient(180deg, #fffdf5 0%, #fef3c7 100%)`
- Manteiga: `linear-gradient(135deg, #fefce8 0%, #fde68a 100%)`
- Creme e pêssego: `linear-gradient(135deg, #fef9c3 0%, #fed7aa 100%)`
- Luz da janela: `radial-gradient(circle at 70% 20%, #fef08a 0%, #fefce8 55%, #fffdf7 100%)`

Amarelos suaves para leituras longas e marcas gentis. Combinam bem com texto grafite, marrom e verde profundo.

## Gradientes dourados e de amarelo escuro sem oliva

Para o amarelo parecer rico, não o escureça. Desloque-o. Leve as paradas mais profundas para âmbar, ocre e marrom, e o amarelo vira dourado, mel e mostarda em vez de cáqui. Para acabamentos metálicos em particular, [gradientes dourados](https://gradiently.design/pt-br/guide/gold-gradient-design) mostra como simular o brilho.

- Mel: `linear-gradient(135deg, #fde68a 0%, #d97706 55%, #78350f 100%)`
- Mostarda: `linear-gradient(160deg, #facc15 0%, #ca8a04 50%, #713f12 100%)`
- Ouro escovado: `linear-gradient(135deg, #fef3c7 0%, #e9b949 40%, #a16207 75%, #fde68a 100%)`
- Ouro sobre escuro: `radial-gradient(circle at 75% 25%, #fde047 0%, #b45309 30%, #1c1208 75%)`

Cada parada profunda se move para âmbar ou marrom. O resultado parece dourado, não oliva.

> **Cuidado com a cor da sombra** Se você sombreia um objeto amarelo num design com uma sobreposição cinza ou preta, ele parecerá oliva. Sombreie o amarelo com um âmbar ou marrom translúcido.

## Gradientes de amarelo e azul sem o meio verde

Amarelo e azul são um par clássico, mas uma mistura direta entre eles gera uma faixa verde. Você tem três boas opções: pôr uma parada clara entre eles, passar a mistura por rosa e violeta ou manter as duas cores separadas, como áreas e não como mistura.

- Evite: meio lima: `linear-gradient(135deg, #facc15 0%, #60a5fa 100%)`
- Pelo creme: `linear-gradient(135deg, #fde047 0%, #fffbeb 45%, #93c5fd 100%)`
- Pelo rosa: `linear-gradient(135deg, #fde047 0%, #f9a8d4 45%, #818cf8 100%)`
- Luz amarela sobre azul-marinho: `radial-gradient(circle at 80% 20%, #facc15 0%, #1e3a8a 40%, #0b1437 100%)`

A primeira mistura mostra o problema. As outras três unem amarelo e azul sem nunca passar pelo verde.

No CSS moderno, você também pode pedir ao navegador que dê a volta longa no círculo cromático. Interpolar em OKLCH com `longer hue` leva o amarelo ao azul por laranja, rosa e violeta, em vez de verde. Suporte e sintaxe estão em [gradientes CSS em OKLCH](https://gradiently.design/pt-br/guide/css-gradient-oklch).

```css
.banner {
  /* fallback for older browsers: route through pink by hand */
  background: linear-gradient(90deg, #fde047, #f9a8d4, #818cf8);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .banner {
    background: linear-gradient(in oklch longer hue 90deg, #fde047, #818cf8);
  }
}
```

O caminho longo pelo círculo de matizes evita o verde. Mantenha o plano B feito à mão para navegadores sem interpolação de espaço de cor.

## Texto sobre um gradiente amarelo

O amarelo é a cor saturada mais clara que existe, então texto branco desaparece sobre ele. Branco sobre `#facc15` mede cerca de 1,5 para 1, enquanto um marrom profundo como `#422006` mede mais de 9 para 1 sobre o mesmo amarelo. Use texto escuro quase sempre e reserve o branco para os dourados mais profundos. [Contraste de cores e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility) traz os limites.

| Fundo | Texto branco | Texto marrom #422006 |
| --- | --- | --- |
| Limão `#fde047` | Falha feio | Cerca de 11:1 |
| Girassol `#facc15` | Cerca de 1,5:1, falha | Cerca de 9,5:1 |
| Ouro escuro `#ca8a04` | Cerca de 2,9:1, falha | Passa |
| Ocre `#a16207` | Cerca de 4,9:1, passa | Fraco |
| Bronze `#854d0e` | Cerca de 6,9:1, passa | Falha |

Medições de cor chapada. Num gradiente, confira a parte mais clara atrás de cada linha de texto.

Um post de fazenda com título em marrom escuro sobre um fundo em gradiente de amarelo quente e laranja

Texto escuro e quente sobre um amarelo ensolarado. Lê-se na hora e mantém o clima alegre.

No Gradiently, a tinta Auto toma essa decisão por você, escolhendo texto claro ou escuro para cada linha na própria paleta do Mark, então um design amarelo não precisa de checagem manual de contraste a cada redimensionamento. Se o amarelo faz parte da sua identidade, [significado da cor amarela](https://gradiently.design/pt-br/guide/yellow-color-meaning) explica o que ele sinaliza, e [gradientes laranja](https://gradiently.design/pt-br/guide/orange-gradient) são seus vizinhos naturais.

## FAQ

### Por que meu gradiente amarelo parece verde?

Ou ele mistura com uma cor fria, como azul ou verde-azulado, ou o próprio amarelo tende ao limão. Use paradas parceiras mais quentes, como laranja, rosa ou creme.

### Como faço um gradiente amarelo escuro que não seja oliva?

Aprofunde o amarelo com âmbar, ocre e marrom em vez de cinza ou preto. Isso o transforma em dourado ou mel, e não em cáqui.

### Que cor de texto vai sobre um fundo amarelo?

Quase preto, grafite ou marrom escuro. Texto branco falha no contraste em quase todo amarelo vivo.

### Como misturo amarelo e azul num só gradiente?

Ponha creme, branco ou rosa entre eles, ou interpole em OKLCH com `longer hue` para a mistura passar por cores quentes em vez de verde.

### Qual é um bom código CSS de gradiente amarelo?

`linear-gradient(135deg, #fde047 0%, #f59e0b 100%)` é um amarelo quente confiável que nunca tende ao verde.