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

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

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

## The short version

- O amarelo associa-se ao sol, ao calor, ao otimismo, à felicidade e à atenção, e também à cautela e ao aviso.
- O amarelo é a cor saturada mais clara, e por isso se usa em autocarros escolares, táxis, vestuário de alta visibilidade e sinais de aviso.
- O texto branco sobre amarelo é quase ilegível, enquanto o preto sobre amarelo puro atinge uma razão de contraste de 19,56:1, das mais altas possíveis.
- Escurecer o amarelo com preto torna-o verde-azeitona, por isso os amarelos mais profundos, como mostarda e dourado, fazem-se deslocando para laranja e castanho.
- 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** é, primeiro, o sol: calor, otimismo, felicidade e energia. Como o amarelo é a mais clara e chamativa das cores saturadas, significa também atenção e cautela, das riscas de uma vespa a um sinal de estrada. Em branding lê-se como simpático, acessível e animado. Bem usado, é inesquecível. Usado sem cuidado, é a cor com maior probabilidade de tornar as palavras ilegíveis, e por isso este guia dedica tanto tempo ao contraste como ao significado.

## O que significa o amarelo

- **Sol e calor:** a cor da luz solar, do verão e da fruta madura, por isso parece luminosa e generosa.
- **Otimismo e felicidade:** as carinhas sorridentes, os girassóis e as embalagens alegres recorrem a ele.
- **Atenção:** os marcadores amarelos, as notas autocolantes e as etiquetas de preço existem porque o amarelo se nota.
- **Cautela:** a fita de perigo, os sinais de aviso e as riscas pretas e amarelas que vespas e abelhas partilham com as fábricas.
- **Menos lisonjeiro:** em inglês, «yellow» pode significar cobarde, e os amarelos pálidos e doentios podem sugerir doença ou velhice.

Como com qualquer cor, estas associações são aprendidas e dependem do contexto. Um amarelo manteiga suave numa caixa de padaria e um amarelo de perigo num sinal de obra são o mesmo tom com mensagens opostas; a [psicologia da cor](https://gradiently.design/pt-pt/guide/color-psychology) explica porquê.

## O que significa cada tom de amarelo

| Tom | Hex de exemplo | Costuma ler-se como | Comum em |
| --- | --- | --- | --- |
| Limão | `#FFF44F` | Fresco, vivo, divertido | Bebidas, marcas infantis, verão |
| Girassol | `#FFD60A` | Otimista, simpático, ousado | Retalho, entregas, comida |
| Açafrão | `#F4C430` | Quente, condimentado, espiritual | Comida, viagens, cerimónias |
| Â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, caseiro, gentil | Padarias, produtos de bebé, papelaria |

Sete amarelos. Quanto mais pálido e esverdeado, mais fresco 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 eles precisam de texto escuro.

## Amarelo e legibilidade

O amarelo é quase tão claro como o branco, por isso comporta-se como um fundo claro, por mais gritante que pareça. O texto branco sobre girassol `#FFD60A` mede 1,41:1, muito abaixo dos 4,5:1 que as WCAG pedem para texto corrido. O amarelo puro sobre branco é pior, a 1,07:1: quase invisível. Inverte e o amarelo passa a ser um dos melhores fundos que existem: o preto sobre amarelo puro atinge 19,56:1.

### Evita

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

### Faz

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

Qualquer amarelo deste artigo passa com facilidade com quase preto: a mostarda com `#111111` atinge 9,15:1, e a manteiga com castanho profundo `#3A2E05` atinge 11,78:1. O [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) explica os limiares.

## Porque é que o amarelo escuro fica verde, e como corrigir

Junta preto ao amarelo e ele não se torna um amarelo mais profundo; torna-se verde-azeitona. É por isso que os amarelos mais profundos, como mostarda, dourado e âmbar, se fazem deslocando o tom para laranja e juntando um toque de castanho. O mesmo vale para os gradientes amarelos: deixa a extremidade escura passar por âmbar e castanho-terra, não por cinzento.

- Escurecido com preto: azeitona: `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%)`
- Girassol para laranja: `linear-gradient(135deg, #ffd60a 0%, #ff8a00 100%)`

O primeiro gradiente mostra o problema: o amarelo escurecido em direção ao preto tende para o verde. O segundo corrige-o passando por âmbar e castanho-terra.

Os [tons, matizes e sombras](https://gradiently.design/pt-pt/guide/tints-tones-shades) explicam porque o amarelo se comporta assim, e os [gradientes amarelos](https://gradiently.design/pt-pt/guide/yellow-gradient) têm mais códigos construídos sobre o mesmo princípio.

## O significado do amarelo em diferentes culturas

- **China:** o amarelo foi historicamente a cor imperial, reservada ao imperador, e ainda transmite uma noção de dignidade.
- **Hinduísmo e budismo:** o açafrão e o amarelo profundo têm significado sagrado, visível nos hábitos de muitos monges budistas.
- **Ciclismo:** o líder do Tour de França veste a camisola amarela, o maillot jaune.
- **América do Norte:** autocarros escolares amarelos e laços amarelos, sinal de esperança no regresso de alguém.
- **Em todo o lado:** o par preto e amarelo dos sinais de aviso lê-se como cautela na maior parte do mundo.

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

## O amarelo no branding

As marcas amarelas parecem simpáticas, rápidas e acessíveis, e por isso o amarelo é comum em entregas, retalho económico, comida rápida e produtos infantis. Por ser tão gritante, as identidades amarelas mais fortes usam-no como campo com letra preta, ou como único acento entre neutros. Uma página inteira de amarelo atrás de fotografia amarela cansa depressa a vista.

Bons parceiros são o carvão e o preto para impacto, o azul-marinho e o cobalto para um contraste confiante, e o creme quente ou a terracota para uma sensação mais suave e solarenga. Juntar o amarelo a outras cores vivas é possível, mas segue as regras das [paletas de cores vivas](https://gradiently.design/pt-pt/guide/bright-color-palettes) para o texto ter onde assentar com calma.

Uma publicação vertical de café em amarelo solarengo quente com uma única palavra grande e escura

Uma publicação de Instagram a 1080×1350. Amarelo quente com letra escura: simpático e legível do outro lado de um feed.

Um pin vertical de evento em tons de âmbar e dourado a anunciar um mercado ao fim da tarde

Um pin do Pinterest a 1000×1500 onde o âmbar profundo e o dourado se leem como luz quente de fim de tarde.

Os fundos amarelos são onde a Tinta automática do Gradiently se justifica: um Mark escolhe texto claro ou escuro linha a linha a partir da sua própria paleta, por isso o texto num Mark amarelo nunca acaba branco sobre o sol. Com o Pro, o mesmo design redimensiona-se para todos os formatos num só passo e as palavras continuam legíveis.

## FAQ

### O que significa a cor amarela?

O amarelo associa-se ao sol, ao otimismo, à felicidade, à energia e à atenção. Sinaliza também cautela e, em inglês, pode significar cobardia.

### O que significa o amarelo mostarda?

A mostarda lê-se como vintage, quente e confiante. É o lado adulto do amarelo, comum em moda, interiores e marcas de café.

### Que cor de texto vai sobre amarelo?

Quase preto ou um castanho profundo. O texto branco sobre amarelo falha muito no contraste, enquanto o preto sobre amarelo puro atinge 19,56:1.

### Porque é que o amarelo escuro parece verde?

Juntar preto ao amarelo desloca-o para verde-azeitona. Para fazer um amarelo mais profundo, desloca o tom para laranja e junta um pouco de castanho.

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

O amarelo é memorável e simpático, o que serve entregas, comida, retalho e marcas infantis. Junta-o a letra escura e usa-o como campo ou acento, não em todo o lado.