# Paletas de cores neutras com personalidade

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

Bege, cinza e branco podem parecer sofisticados ou parecer que ninguém decidiu nada. A diferença está na temperatura, na amplitude e em uma pequena surpresa. Aqui estão oito paletas neutras com códigos e as regras que as mantêm vivas.

## The short version

- Uma paleta de cores neutras é feita de cores pouco saturadas, como branco, marfim, bege, taupe, cinza, carvão e quase preto.
- Neutros têm temperatura: os quentes puxam para o amarelo, o vermelho ou o marrom, e os frios puxam para o azul ou o verde.
- Uma paleta neutra parece chapada quando todas as cores têm a mesma luminosidade, então inclua ao menos um tom bem claro, um médio e um bem escuro.
- A maioria das paletas neutras precisa de uma cor de acento, usada em pequena quantidade, para dar um ponto de foco.
- Neutros médios, como taupe e pedra, costumam falhar no contraste para texto corrido sobre fundo claro, então componha o texto com o tom mais escuro.

Uma boa **paleta de cores neutras** usa cores de pouquíssima saturação, como marfim, areia, taupe, pedra, carvão e quase preto, e lhes dá personalidade de três formas: assume uma temperatura, percorre todo o caminho do claro ao escuro e acrescenta um pequeno acento. Sem isso, você fica com aquele bege que parece o padrão de fábrica. Abaixo estão oito paletas com códigos para copiar e a lógica de cada uma, para você ajustar em vez de apenas copiar.

## Neutros quentes, frios e verdadeiros

Pouquíssimos neutros são realmente incolores, e os que são podem parecer frios. A maioria puxa para algum lado, e essa inclinação define o clima. Misturar sem querer um bege quente com um cinza azulado frio é a razão mais comum de um esquema neutro parecer um pouco fora do lugar.

| Família | Puxa para | Sensação | Códigos de exemplo |
| --- | --- | --- | --- |
| Neutros quentes | Amarelo, vermelho, marrom | Suave, aconchegante, acolhedor | Marfim `#F3EEE6`, areia `#D9CBB4`, taupe `#8A8178` |
| Neutros frios | Azul, verde | Limpo, técnico, discreto | Névoa `#ECEEEF`, ardósia `#6B7075`, grafite `#1F2326` |
| Greige | Equilíbrio entre cinza e bege | Calmo, versátil | Greige `#BDB6AC`, pedra `#A39A8F` |
| Cinza puro | Quase nada | Neutro, às vezes frio | `#F2F2F2`, `#8C8C8C`, `#222222` |

Escolha uma família como base. Uma única cor da família oposta pode funcionar como acento deliberado, nunca como quase acerto.

[Cores quentes e frias](https://gradiently.design/pt-br/guide/warm-and-cool-colors) aprofunda a temperatura, e [temperatura de cor](https://gradiently.design/pt-br/guide/color-temperature) mostra como a iluminação e as telas a alteram.

## Oito paletas neutras com códigos hex

Cada paleta tem um fundo claro, um ou dois tons médios, um escuro para o texto e, na maioria dos casos, um acento. Leia os nomes como um briefing: eles descrevem o lugar onde a paleta se sentiria em casa.

- Linho: #f3eee6
- Areia: #d9cbb4
- Taupe: #8a8178
- Café expresso: #2b2724
- Acento terracota: #b5543a

Café de galeria. Quente do fundo ao texto, com terracota para um botão, um preço ou uma linha.

- Névoa: #eceeef
- Peltre: #c3c8cc
- Ardósia: #6b7075
- Grafite: #1f2326
- Acento azul sinal: #3d6bff

Estúdio de software. Cinzas frios com um único azul saturado, a clássica paleta de interface de produto.

- **Aveia e oliva:** aveia `#E9E1D2`, linhaça `#CDBF9F`, oliva `#6E6B4A`, casca `#2F2A22`. Natural sem o clichê das folhas verdes.
- **Casa de pedra:** giz `#F5F3EF`, greige `#BDB6AC`, pedra `#A39A8F`, carvão `#34312D`, latão `#B08D57`. Interiores, arquitetura, luxo discreto.
- **Papel e tinta:** papel `#FAF7F0`, papel-jornal `#E4DED2`, lápis `#5C544C`, tinta `#151515`, vermelho de editor `#C8372D`. Editorial e sério.
- **Cinza vidro do mar:** neblina `#EEF1EF`, vidro do mar `#B9C6C0`, porto `#5E6F6A`, fundo `#1C2624`. Frio, mas suavizado pelo verde.
- **Neutro rosado:** porcelana `#F7F0EC`, pedra rosada `#DCC7BE`, malva taupe `#8C7470`, cacau `#33221F`. Quente e gentil, bom para beleza e bem-estar.
- **Neutro noturno:** ônix `#121212`, fumaça `#2A2826`, cinza `#77716B`, osso `#E9E2D6`. Um fundo escuro com texto em luz quente.

Antes de decidir por uma, teste-a em material real. Ponha seu logotipo, uma foto de produto e um parágrafo de texto sobre cada fundo. As fotografias costumam trazer o próprio calor ou frieza, e uma paleta que briga com a sua fotografia nunca vai parecer calma, por mais cuidado que você tenha tido ao escolhê-la.

## Como dar personalidade a uma paleta neutra

1. **Assuma uma temperatura** Escolha quente ou frio e confira cada cor com essa escolha. Coloque as amostras lado a lado: qualquer uma que pareça levemente verde ao lado de um bege quente está na família errada.
2. **Amplie a amplitude** Inclua um tom perto do branco, um tom médio e um perto do preto. Paletas neutras feitas só de beges médios não têm profundidade nem cor legível para o texto.
3. **Acrescente um acento** Uma única cor saturada em pequenas doses dá ao olhar um lugar para pousar. [Cor de acento](https://gradiently.design/pt-br/guide/accent-color) mostra quanto é suficiente.
4. **Traga textura** Os neutros ficam mais ricos com grão, papel ou uma suave mudança de luz. Um retângulo bege chapado parece inacabado; o mesmo bege com um pouco de textura parece um material.
5. **Use proporção, não mais cores** A maior parte da superfície fica clara, os tons médios ficam com as formas grandes e o escuro leva as palavras. A [regra 60 30 10](https://gradiently.design/pt-br/guide/60-30-10-rule) é uma boa divisão inicial.

## Degradês neutros que não são chatos

Um degradê neutro funciona quando a mudança está na luz e não no matiz. Pense na luz do dia caindo sobre uma parede de gesso: a cor quase não se move, o brilho sim. Mantenha as paradas próximas e acrescente grão para esconder o banding, que aparece fácil em misturas claras e de baixo contraste.

- Luz de gesso: `radial-gradient(circle at 25% 20%, #fbf8f3 0%, #eae1d3 50%, #cdbf9f 100%)`
- Nublado: `linear-gradient(170deg, #eceeef 0%, #c3c8cc 60%, #8f969b 100%)`
- Crepúsculo expresso: `radial-gradient(circle at 70% 30%, #5c544c 0%, #2b2724 50%, #121212 100%)`
- Pedra rosada: `linear-gradient(160deg, #f7f0ec 0%, #dcc7be 55%, #b5948a 100%)`

Quatro degradês neutros. Cada um muda sobretudo em luminosidade, o que os mantém calmos.

Para ver mais, consulte [degradês sutis](https://gradiently.design/pt-br/guide/subtle-gradients), [degradês bege](https://gradiently.design/pt-br/guide/beige-gradient) e [degradês cinza](https://gradiently.design/pt-br/guide/grey-gradient).

## Texto e contraste em fundos neutros

Paletas neutras parecem suaves, o que tenta as pessoas a usar texto suave. Taupe `#8A8178` sobre linho `#F3EEE6` mede apenas 3,31:1, abaixo dos 4,5:1 que a WCAG pede para texto corrido. Café expresso `#2B2724` sobre o mesmo linho chega a 12,82:1. Use o seu neutro mais escuro para tudo o que as pessoas precisam ler e reserve os tons médios para formas, bordas e texto grande de destaque.

Um post vertical de padaria em cores neutras suaves, em que o pequeno texto de apoio está apagado

Palavras de baixo contraste sobre um fundo neutro claro perdem primeiro a linha de apoio.

O mesmo post da padaria com texto claro e legível sobre uma área mais calma do fundo neutro

Com o fundo mais calmo atrás das palavras, todas as linhas se leem e a paleta continua suave.

O Gradiently faz isso automaticamente: um Mark se acomoda atrás das suas palavras e escolhe texto claro ou escuro linha a linha a partir da própria paleta, então um fundo neutro e discreto nunca custa legibilidade. Confira você mesmo qualquer par de cores com [contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

## FAQ

### Que cores fazem parte de uma paleta de cores neutras?

Branco, marfim, creme, bege, areia, taupe, greige, cinza, carvão e quase preto, além das versões levemente tingidas de cada um. A maioria das paletas neutras também inclui uma cor de acento.

### O que é greige?

Greige é uma mistura de cinza e bege que fica entre o quente e o frio, como `#BDB6AC`. Funciona como ponte quando uma paleta precisa combinar com ambientes quentes e frios.

### Que cor de acento combina com neutros?

Neutros quentes combinam com terracota, ferrugem, oliva ou latão. Neutros frios combinam com um azul saturado, um verde nítido ou um vermelho profundo. Use o acento com moderação para que continue especial.

### Como evito que uma paleta neutra fique sem graça?

Assuma uma só temperatura, percorra do claro ao escuro, acrescente um único acento e dê textura às superfícies. O que fica sem graça são os beges médios chapados e sem amplitude.

### Cores neutras são boas para marcas?

Sim, sobretudo para marcas premium, editoriais e de interiores. Como muitas marcas usam neutros, dê à sua algo distintivo, como um acento, uma fonte ou um material de fundo específico.