# Gradiente bege: códigos neutros e quentes que acalmam

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

É fácil acertar quase no bege e surpreendentemente difícil acertar mesmo. O segredo é escolher um subtom, manter amplitude suficiente para que a mistura se veja e dar-lhe textura.

## The short version

- Um gradiente bege parece calmo e sofisticado quando todas as paragens partilham o mesmo subtom: rosa, amarelo ou cinzento.
- Os gradientes bege precisam de uma amplitude de luminosidade maior do que se imagina, ou a mistura desaparece e o design fica plano.
- Gradientes claros e de baixo contraste sofrem facilmente de banding nos ecrãs, e uma camada de grão fino é a correção mais fiável.
- Castanhos escuros e quentes, como o café expresso, resultam melhor sobre bege do que o preto puro, e o texto branco raramente funciona.
- Os gradientes areia vão do creme pálido a um dourado tostado, tal como uma duna escurece no lado da sombra.

Um **gradiente bege** mistura neutros quentes, creme, areia, aveia e linho, de um tom claro para outro ligeiramente mais profundo, todos com o mesmo subtom. Bem feito, transmite calma, naturalidade e uma sofisticação discreta, e é por isso que a cosmética, os interiores, os casamentos e a moda lenta o adoram. Mal feito, parece a digitalização de um envelope antigo. A diferença resume-se a três escolhas: um subtom, amplitude suficiente e um pouco de textura. Seguem-se os códigos para cada estilo.

## Escolhe um subtom antes de escolheres uma cor

Todos os beges têm uma inclinação. Os beges rosados parecem suaves, quase de pele. Os beges amarelados parecem solares e arenosos. Os beges acinzentados, muitas vezes chamados greige, parecem arquitetónicos e frios. Misturar subtons num só gradiente é a principal razão para o bege parecer sujo: uma paragem rosada ao lado de uma cinzenta lê-se como uma mancha, não como uma mistura. Decide primeiro e mantém-te nesse subtom.

- Linho: #faf6ef
- Bege rosado: #ecd3c6
- Areia rosa: #d4ae9c
- Areia: #e8cfa8
- Duna de mel: #c9a273
- Greige: #ddd6cc
- Pedra: #b9b0a3
- Tinta expresso: #3b2a1e

Três famílias de subtons: rosa no par rosado, amarelo no par areia, cinzento no greige e na pedra. O linho e o expresso combinam com as três.

## Códigos de gradientes areia

Um **gradiente areia** segue uma duna: claro e cremoso do lado virado para o sol, mais profundo e dourado do lado da sombra. São os beges mais quentes desta lista e os mais indulgentes, porque o subtom amarelo impede-os de passarem a cinzento.

- Duna de areia: `linear-gradient(160deg, #f6ead6 0%, #e8cfa8 50%, #c9a273 100%)`
- Meio-dia no deserto: `linear-gradient(180deg, #fbf3e6 0%, #efd9b4 60%, #d9b27c 100%)`
- Sombra da duna: `linear-gradient(135deg, #f2e2c9 0%, #d8b48a 45%, #a9805a 100%)`
- Areia molhada: `radial-gradient(ellipse at 30% 20%, #f3e5cf 0%, #d6bb94 50%, #b08d66 100%)`

Quatro estilos de areia. A sombra da duna tem a maior amplitude e aguenta-se melhor em tamanhos pequenos; o meio-dia no deserto é o mais luminoso e fica bem com texto escuro em todo o lado.

## Códigos de linho, aveia e pedra

Estes são os beges mais discretos, mais próximos do creme e do greige. Dão excelentes fundos para fotografias de produto e leitura longa, porque ficam em segundo plano e deixam o resto brilhar. O linho é o mais subtil, quase nem chega a ser um gradiente; o bege rosado traz o subtom rosa; a pedra é a mais fria, quase cinzenta.

- Linho: `linear-gradient(180deg, #faf6ef 0%, #f1e8da 100%)`
- Latte de aveia: `linear-gradient(150deg, #f5ede1 0%, #e6d5bf 55%, #cdb59a 100%)`
- Bege rosado: `linear-gradient(160deg, #f8ece6 0%, #ecd3c6 55%, #d4ae9c 100%)`
- Pedra: `linear-gradient(160deg, #f2efea 0%, #ddd6cc 50%, #b9b0a3 100%)`

Neutros suaves. Se um gradiente bege parecer uma cor lisa no teu ecrã, a amplitude é pequena demais: aprofunda a última paragem.

Para a família mais ampla de tons calmos, vê as [paletas de cores neutras](https://gradiently.design/pt-pt/guide/neutral-color-palettes) e as [cores terra](https://gradiently.design/pt-pt/guide/earth-tone-colors). Quando quiseres o extremo mais escuro da mesma família, café e caramelo, os códigos do [gradiente castanho](https://gradiently.design/pt-pt/guide/brown-gradient) continuam onde estes acabam.

## Porque é que os gradientes bege têm banding e como corrigir

Os gradientes claros e de pequena amplitude só passam por um punhado de valores de cor distintos, por isso o ecrã desenha-os em degraus visíveis, e a compressão forte agrava o problema. O bege é particularmente propenso a isto. Uma camada de grão fino desfaz os degraus e, como bónus, faz o bege parecer papel, estuque ou tecido em vez de uma cor de ecrã. O artigo sobre [banding em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding) explica a causa em pormenor.

```css
.sand {
  position: relative;
  background: linear-gradient(160deg, #f6ead6 0%, #e8cfa8 50%, #c9a273 100%);
}

.sand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Um gradiente areia com uma camada de ruído SVG multiplicada por cima. Aumenta a opacidade para uma superfície mais áspera, mais parecida com papel.

Mais receitas de grão, e até onde ir, estão em [gradientes granulados](https://gradiently.design/pt-pt/guide/grainy-gradients). Os Marks da Gradiently trazem o grão como parte da receita, por isso um Mark bege chega com a textura já equilibrada em todos os tamanhos.

## Cores de texto que ficam bem no bege

| Tinta | Hex | Efeito | Usar em |
| --- | --- | --- | --- |
| Expresso | `#3b2a1e` | Quente e suave, ainda muito legível | Títulos e corpo de texto em qualquer bege |
| Carvão | `#2b2b2b` | Nítido e moderno | Fundos de pedra e greige |
| Verde-azeitona escuro | `#3d4a2f` | Natural, ligeiramente inesperado | Fundos de areia e aveia |
| Terracota | `#a4502f` | Acento quente | Apenas títulos grandes e preços |
| Branco | `#ffffff` | Fraco sobre bege claro | Apenas títulos grandes nas paragens mais escuras da sombra da duna |

O preto funciona, mas o castanho expresso mantém todo o design dentro da mesma família quente.

## Um bege que acalma, sem ser monótono

### Parece monótono

- Beges rosados, amarelados e acinzentados na mesma mistura
- Duas paragens tão próximas que a mistura é invisível
- Uma superfície digital limpa com bandas visíveis
- Texto preto puro e um layout carregado
- Texto branco sobre areia clara

### Parece calmo

- Um só subtom em todas as paragens
- Uma amplitude clara, do creme à areia tostada
- Um grão fino que se lê como papel ou estuque
- Texto expresso e muito espaço
- Tinta escura, com um único acento terracota

O bege premeia a contenção. Poucas palavras, muito espaço e uma fotografia de produto forte parecem mais caros do que qualquer quantidade de decoração. É esse o estilo por trás da maioria do bom [design de marcas de cosmética](https://gradiently.design/pt-pt/guide/skincare-brand-design), e funciona igualmente bem em papelaria de casamento e estúdios de interiores.

Uma publicação vertical sobre um fundo de cor areia quente com as palavras Menos, mas melhor em letras castanho-escuras

Uma publicação de lançamento de cosmética num Mark areia. Texto expresso, uma linha, muito ar.

## Onde um gradiente bege ganha o seu lugar

O bege trabalha mais onde apoia outra coisa: um produto, uma fotografia, umas quantas palavras bem escolhidas. Alguns sítios onde brilha, com os tamanhos para desenhar:

- **Fotografias de produto:** um gradiente de linho ou aveia atrás de uma garrafa ou de uma peça de cerâmica, a 2048×2048 para uma imagem de produto Shopify, mantém o objeto como protagonista.
- **Papelaria de casamento:** bege rosado ou areia para convites de 5×7 in (1500×2100 a 300 dpi), com texto expresso ou verde-azeitona escuro. Mais ideias em [paletas de cores para casamentos](https://gradiently.design/pt-pt/guide/wedding-color-palettes).
- **Interiores e arquitetura:** gradientes de pedra e greige para capas de portefólio e publicações de projetos, onde a fotografia dá a cor. Vê [branding para designers de interiores](https://gradiently.design/pt-pt/guide/interior-designer-branding).
- **Secções de sites:** um gradiente de linho atrás de um testemunho ou de uma tabela de preços separa-o das secções brancas sem uma borda dura.
- **Um feed de Instagram calmo:** alterna publicações areia com fotografias e o feed lê-se como um todo ponderado.

Como o bege é tão subtil, o mesmo gradiente pode parecer certo num story e desbotado num banner largo. Renderiza-o para cada formato em vez de esticares um único ficheiro, e confirma a paragem mais clara num telemóvel com o brilho no máximo, onde o bege pálido pode aproximar-se do branco simples.

## FAQ

### Que cores compõem um gradiente bege?

Tons de creme, areia, aveia e linho que partilham um único subtom, por exemplo #f6ead6 para #e8cfa8 para #c9a273 num gradiente areia quente.

### Porque é que o meu gradiente bege parece sujo?

Normalmente porque mistura subtons, como um bege rosado ao lado de um acinzentado. Mantém todas as paragens na mesma família.

### Que cor de letra uso num fundo bege?

Um castanho escuro e quente, como o expresso #3b2a1e, lê-se com clareza e parece mais suave do que o preto. O carvão fica bem nos greiges mais frios.

### Como evito o banding num gradiente claro?

Aumenta a amplitude entre a primeira e a última paragem, junta uma camada de grão fino por cima do gradiente e exporta em PNG em vez de JPEG comprimido.