# Significado da cor amarela: sol, alerta e design legível

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

O amarelo é a cor mais clara do círculo cromático, o que o torna alegre, urgente e quase impossível de ler com texto branco. Veja o que o amarelo significa, tom a tom, e como criar com ele.

## The short version

- O amarelo é associado a sol, calor, otimismo, felicidade e atenção, e também a cautela e aviso.
- O amarelo é a cor saturada mais clara, por isso é usado em ônibus escolares, táxis, roupas de alta visibilidade e placas de aviso.
- Texto branco sobre amarelo é quase ilegível, enquanto preto sobre amarelo puro atinge uma razão de contraste de 19,56:1, uma das mais altas possíveis.
- Escurecer o amarelo com preto o transforma em oliva, então amarelos mais profundos, como mostarda e dourado, nascem de um deslocamento para o laranja e o marrom.
- O amarelo foi historicamente a cor imperial na China, e o açafrão e o amarelo profundo têm significado sagrado no hinduísmo e no budismo.

O **significado da cor amarela** é, antes de tudo, o sol: calor, otimismo, felicidade e energia. Como o amarelo é a mais clara e chamativa das cores saturadas, ele também significa atenção e cautela, das listras de uma vespa a uma placa de trânsito. No branding, parece amigável, acessível e animado. Bem usado, é inesquecível. Usado sem cuidado, é a cor com mais chance de tornar as palavras ilegíveis, e por isso este guia gasta tanto tempo com contraste quanto com significado.

## O que o amarelo significa

- **Sol e calor:** a cor da luz do sol, do verão e da fruta madura, então parece luminosa e generosa.
- **Otimismo e felicidade:** smileys, girassóis e embalagens alegres se apoiam nele.
- **Atenção:** marca-textos, post-its e etiquetas de preço amarelos existem porque o amarelo é notado.
- **Cautela:** fita de perigo, placas de aviso e as listras pretas e amarelas que vespas e abelhas dividem com chãos de fábrica.
- **Menos lisonjeiro:** em inglês, “yellow” pode significar covarde, e amarelos pálidos e doentios podem sugerir doença ou velhice.

Como em qualquer cor, essas associações são aprendidas e dependem do contexto. Um amarelo manteiga suave numa caixa de padaria e um amarelo de perigo numa placa de obra são o mesmo matiz com mensagens opostas; [psicologia das cores](https://gradiently.design/pt-br/guide/color-psychology) explica por quê.

## O que cada tom de amarelo significa

| Tom | Hex de exemplo | Costuma parecer | Comum em |
| --- | --- | --- | --- |
| Limão | `#FFF44F` | Fresco, cítrico, divertido | Bebidas, marcas infantis, verão |
| Girassol | `#FFD60A` | Otimista, amigável, ousado | Varejo, entregas, alimentação |
| Açafrão | `#F4C430` | Quente, condimentado, espiritual | Alimentação, viagem, cerimônia |
| Âmbar | `#FFBF00` | Cautela, calor, brilho | Sinalização, iluminação, cerveja |
| Mostarda | `#E1AD01` | Vintage, confiante, terroso | Moda, interiores, café |
| Dourado | `#D4A017` | Prestígio, recompensa, celebração | Prêmios, luxo, casamentos |
| Manteiga | `#FFF1B8` | Suave, aconchegante, gentil | Padarias, produtos para bebê, papelaria |

Sete amarelos. Quanto mais pálido e esverdeado o amarelo, mais fresco ele parece; quanto mais profundo e alaranjado, mais quente e adulto.

- Limão: #fff44f
- Girassol: #ffd60a
- Açafrão: #f4c430
- Âmbar: #ffbf00
- Mostarda: #e1ad01
- Dourado: #d4a017
- Manteiga: #fff1b8

Os tons da tabela lado a lado. Todos precisam de texto escuro.

## Amarelo e legibilidade

O amarelo é quase tão claro quanto o branco, então se comporta como um fundo claro, por mais berrante que pareça. Texto branco sobre girassol `#FFD60A` mede 1,41:1, bem abaixo dos 4,5:1 que a WCAG pede para texto corrido. Amarelo puro sobre branco é pior, 1,07:1: quase invisível. Inverta e o amarelo vira um dos melhores fundos que existem: preto sobre amarelo puro chega a 19,56:1.

### Evite

- Texto branco sobre qualquer amarelo
- Texto amarelo sobre página branca
- Texto dourado `#D4A017` sobre branco, só 2,38:1
- O amarelo como único sinal de aviso

### Faça

- Texto quase preto ou marrom escuro sobre amarelo
- O amarelo como fundo, faixa ou destaque
- Dourado escuro `#8A6D00` para texto sobre branco, 4,92:1
- Uma palavra ou ícone de aviso junto ao amarelo

Qualquer amarelo deste artigo passa fácil com quase preto: mostarda com `#111111` chega a 9,15:1, e manteiga com marrom escuro `#3A2E05` chega a 11,78:1. [Contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica os limites.

## Por que o amarelo escuro fica verde e como corrigir

Acrescente preto ao amarelo e ele não vira um amarelo mais profundo; vira oliva. Por isso amarelos mais profundos, como mostarda, dourado e âmbar, nascem de um deslocamento do matiz para o laranja e de um toque de marrom. O mesmo vale para gradientes amarelos: deixe a ponta escura passar por âmbar e terra de sombra, não por cinza.

- Escurecido com preto: oliva: `linear-gradient(160deg, #fff44f 0%, #8a8a1f 55%, #2a2a10 100%)`
- Escurecido por âmbar: dourado: `linear-gradient(160deg, #fff44f 0%, #ffbf00 45%, #b45309 80%, #3b1d06 100%)`
- Brilho de açafrão: `radial-gradient(circle at 30% 25%, #fff1b8 0%, #f4c430 50%, #9a5b0a 100%)`
- Do girassol ao laranja: `linear-gradient(135deg, #ffd60a 0%, #ff8a00 100%)`

O primeiro gradiente mostra o problema: o amarelo escurecido rumo ao preto tende ao verde. O segundo resolve passando por âmbar e terra de sombra.

[Tintas, tons e sombras](https://gradiently.design/pt-br/guide/tints-tones-shades) explica por que o amarelo se comporta assim, e [gradientes amarelos](https://gradiently.design/pt-br/guide/yellow-gradient) traz mais códigos baseados no mesmo princípio.

## O significado do amarelo em diferentes culturas

- **China:** o amarelo foi historicamente a cor imperial, reservada ao imperador, e ainda carrega uma ideia de dignidade.
- **Hinduísmo e budismo:** o açafrão e o amarelo profundo têm significado sagrado, visível nas vestes de muitos monges budistas.
- **Ciclismo:** o líder do Tour de France veste a camisa amarela, o maillot jaune.
- **América do Norte:** ônibus escolares amarelos e laços amarelos, sinal de esperança pelo retorno de alguém.
- **Em toda parte:** o par preto e amarelo das placas de aviso se lê como cautela em quase todo o mundo.

Para o amarelo ao lado de vermelho, branco e preto, veja [significados das cores em diferentes culturas](https://gradiently.design/pt-br/guide/color-meanings-around-the-world).

## O amarelo no branding

Marcas amarelas parecem amigáveis, ágeis e acessíveis, por isso o amarelo é comum em entregas, varejo de preço baixo, fast food e produtos infantis. Como é tão berrante, as identidades amarelas mais fortes o usam como um campo com texto preto ou como um único destaque entre neutros. Uma página inteira de amarelo atrás de fotografia amarela cansa o olho rápido.

Bons parceiros são grafite e preto para impacto, azul-marinho e cobalto para um contraste confiante, e creme quente ou terracota para uma sensação mais suave e ensolarada. Combinar o amarelo com outras cores berrantes é possível, mas siga as regras de [paletas de cores vibrantes](https://gradiently.design/pt-br/guide/bright-color-palettes) para o texto ainda ter um lugar calmo onde ficar.

Um post vertical de café em amarelo quente e ensolarado com uma única palavra grande e escura

Um post de Instagram em 1080×1350. Amarelo quente com texto escuro: amigável e legível de longe no feed.

Um pin vertical de evento em tons de âmbar e dourado anunciando uma feira ao entardecer

Um pin do Pinterest em 1000×1500 em que âmbar e dourado mais profundos parecem luz quente de fim de tarde.

Fundos amarelos são onde a tinta Auto do Gradiently mostra seu valor: um Mark escolhe texto claro ou escuro linha por linha na própria paleta, então texto sobre um Mark amarelo nunca acaba branco sobre sol. Com o Pro, o mesmo design se redimensiona para todos os formatos de uma vez e as palavras continuam legíveis.

## FAQ

### O que significa a cor amarela?

O amarelo é associado a sol, otimismo, felicidade, energia e atenção. Também sinaliza cautela e, em inglês, pode significar covardia.

### O que significa o amarelo mostarda?

A mostarda parece vintage, quente e confiante. É o lado adulto do amarelo, comum em moda, interiores e marcas de café.

### Que cor de texto vai sobre o amarelo?

Quase preto ou marrom escuro. Texto branco sobre amarelo falha feio no contraste, enquanto preto sobre amarelo puro chega a 19,56:1.

### Por que o amarelo escuro parece verde?

Acrescentar preto ao amarelo o desloca para o oliva. Para um amarelo mais profundo, mova o matiz para o laranja e acrescente um pouco de marrom.

### O amarelo é uma boa cor de marca?

O amarelo é memorável e amigável, o que combina com entregas, alimentação, varejo e marcas infantis. Combine-o com texto escuro e use-o como campo ou destaque, não em todo lugar.