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

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

O amarelo é a cor que mais vezes trai um gradiente: um ponto errado e o sol vira lima, ou o dourado vira caqui. Eis porque acontece, e um conjunto de códigos que se mantêm quentes de ponta a ponta.

## The short version

- Um gradiente amarelo fica verde quando se mistura com ciano, verde-azulado ou azul, porque as cores entre o amarelo e o azul passam pelo verde.
- Os amarelos escuros tendem para azeitona e caqui, por isso aprofunda o amarelo com âmbar, laranja ou castanho em vez de cinzento ou preto.
- O amarelo fica mais solarengo quando os outros pontos tendem para o quente: creme, pêssego, laranja, rosa ou dourado.
- O texto branco quase nunca funciona sobre amarelo; o quase preto ou um castanho profundo lê-se muito melhor.
- Para juntar amarelo e azul na mesma mistura, põe branco, rosa ou violeta entre eles para o ponto médio nunca cair no verde.

Um **gradiente amarelo** parece vivo e alegre quando todos os pontos tendem para o quente: creme, manteiga, limão, dourado, laranja. Falha de duas formas previsíveis. Mistura-o com azul ou verde-azulado e o meio fica verde; escurece-o com cinzento e fica azeitona. Mantém o tom do lado quente do amarelo, aprofunda-o com âmbar em vez de preto, e ele continua a ser sol de lado a lado. Os códigos abaixo assentam nessa regra.

## Porque é que os gradientes amarelos ficam verdes ou turvos

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

- **Misturar com cores frias.** Entre o amarelo e o ciano, o verde-azulado ou o azul, o navegador tem de passar pelo verde. Uma mistura de amarelo solar com azul-céu ganha uma faixa de lima ou salva no meio.
- **Escurecer com preto ou cinzento.** Os nossos olhos leem um amarelo escuro e pouco saturado como azeitona ou caqui, e não como «amarelo escuro». Não existe um amarelo profundo que ainda pareça amarelo.
- **Partir de um limão que já tende para o verde.** Os limões ácidos, como `#e4f04a`, ficam frescos sozinhos mas puxam todos os pontos vizinhos para a lima.

### Fica verde ou azeitona

- Amarelo direto para azul-céu ou verde-azulado
- Amarelo escurecido com cinzento ou preto
- Um limão frio como ponto mais claro
- Amarelo para verde sem nenhum ponto quente

### Mantém-se solarengo

- Amarelo para creme, pêssego, laranja ou rosa
- Amarelo aprofundado com âmbar e castanho
- Um amarelo quente como `#facc15` no ponto mais claro
- Branco ou rosa entre o amarelo e o azul

O mesmo problema do meio cinzento afeta quaisquer cores opostas, e os [gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients) tratam dele em geral. O amarelo é apenas o primeiro a mostrá-lo, porque o verde está tão perto.

## Códigos de gradiente amarelo vivo

Estes são os intensos: verão, faixas de saldos, marcas infantis, festivais, sinalização de aviso bem feita. Cada um junta o amarelo a um parceiro mais quente para haver movimento sem derivar para o verde.

- Sorvete de limão: `linear-gradient(135deg, #fef08a 0%, #facc15 100%)`
- Girassol: `linear-gradient(135deg, #fde047 0%, #f59e0b 100%)`
- Amarelo para 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. Todas as cores parceiras são mais quentes do que o amarelo, e é isso que as mantém limpas.

O amarelo vivo cansa em grandes quantidades, por isso usa-os em publicações e faixas e não num site inteiro. Num story de 1080×1920, uma mistura de amarelo que esbate para laranja na base dá ao olhar um sítio onde pousar e mantém a parte mais viva perto da zona do título, no topo.

## Gradientes de amarelo claro: manteiga e creme

Os amarelos pálidos comportam-se como papel quente. São excelentes fundos para ementas, convites, newsletters e tudo o que tem muita leitura, porque o texto escuro assenta confortavelmente neles. Mantém pelo menos um ponto perto do branco para o amarelo se ler como luz, e não como 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 de janela: `radial-gradient(circle at 70% 20%, #fef08a 0%, #fefce8 55%, #fffdf7 100%)`

Amarelos suaves para leituras longas e marcas gentis. Combinam bem com letra cor de carvão, castanha e verde profundo.

## Gradientes dourados e de amarelo escuro sem azeitona

Para dar riqueza ao amarelo, não o escureças. Desloca-o. Move os pontos mais profundos para âmbar, ocre e castanho, e o amarelo passa a ser dourado, mel e mostarda em vez de caqui. Para acabamentos metálicos em particular, os [gradientes dourados](https://gradiently.design/pt-pt/guide/gold-gradient-design) mostram como imitar o brilho.

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

Cada ponto profundo desloca-se para âmbar ou castanho. O resultado lê-se como dourado e não como azeitona.

> **Atenção à cor da sombra** Se sombreares um objeto amarelo num design com uma sobreposição cinzenta ou preta, ele parecerá azeitona. Sombreia o amarelo com um âmbar ou castanho translúcido.

## Gradientes de amarelo e azul sem o meio verde

O amarelo e o azul são um par clássico, mas uma mistura direta entre eles produz uma faixa verde. Tens três boas opções: pôr um ponto claro entre eles, encaminhar a mistura por rosa e violeta, ou manter as duas cores separadas como áreas em vez de mistura.

- Evitar: meio lima: `linear-gradient(135deg, #facc15 0%, #60a5fa 100%)`
- Por creme: `linear-gradient(135deg, #fde047 0%, #fffbeb 45%, #93c5fd 100%)`
- Por 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 juntam amarelo e azul sem nunca passar pelo verde.

No CSS moderno também podes pedir ao navegador que dê a volta longa ao círculo cromático. Interpolar em OKLCH com `longer hue` leva o amarelo ao azul por laranja, rosa e violeta em vez de verde. O suporte e a sintaxe estão em [gradientes CSS em OKLCH](https://gradiently.design/pt-pt/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 à volta do círculo de tons evita o verde. Mantém o alternativo feito à mão para os navegadores sem interpolação em espaços de cor.

## Texto sobre um gradiente amarelo

O amarelo é a cor saturada mais clara que existe, por isso a letra branca desaparece nele. O branco sobre `#facc15` mede cerca de 1,5 para 1, enquanto um castanho profundo como `#422006` mede mais de 9 para 1 sobre o mesmo amarelo. Usa letra escura quase sempre e guarda o branco para os dourados mais profundos. O [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) tem os limiares.

| Fundo | Texto branco | Texto castanho #422006 |
| --- | --- | --- |
| Limão `#fde047` | Falha muito | Cerca de 11:1 |
| Girassol `#facc15` | Cerca de 1,5:1, falha | Cerca de 9,5:1 |
| Dourado 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 plana. Num gradiente, verifica a parte mais clara atrás de cada linha de texto.

Uma publicação de loja agrícola com título castanho escuro sobre um fundo em gradiente amarelo quente e laranja

Letra escura e quente sobre um amarelo solarengo. Lê-se de imediato e mantém o ambiente alegre.

No Gradiently, a Tinta automática toma essa decisão por ti, escolhendo texto claro ou escuro para cada linha a partir da paleta do próprio Mark, para um design amarelo não precisar de verificação manual de contraste sempre que o redimensionas. Se o amarelo faz parte da tua identidade, o [significado da cor amarela](https://gradiently.design/pt-pt/guide/yellow-color-meaning) explica o que sinaliza, e os [gradientes laranja](https://gradiently.design/pt-pt/guide/orange-gradient) são o vizinho natural.

## FAQ

### Porque é que o meu gradiente amarelo parece verde?

Ou mistura-se com uma cor fria, como azul ou verde-azulado, ou o próprio amarelo tende para limão. Usa pontos parceiros mais quentes, como laranja, rosa ou creme.

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

Aprofunda o amarelo com âmbar, ocre e castanho em vez de cinzento ou preto. Assim passa a dourado ou mel e não a caqui.

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

Quase preto, carvão ou castanho profundo. O texto branco falha o contraste em quase todos os amarelos vivos.

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

Põe creme, branco ou rosa entre eles, ou interpola 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 fiável que nunca deriva para o verde.