# Degradê bege: códigos de neutros quentes que transmitem calma

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

O bege é fácil de quase acertar e surpreendentemente difícil de acertar de verdade. O segredo é escolher um subtom, manter amplitude suficiente para a transição aparecer e dar textura a ele.

## The short version

- Um degradê bege parece calmo e sofisticado quando todas as paradas compartilham um único subtom: rosado, amarelado ou acinzentado.
- Degradês bege precisam de uma amplitude de luminosidade maior do que se imagina, ou a transição some e o design fica chapado.
- Degradês claros e de baixo contraste criam faixas com facilidade nas telas, e uma camada fina de granulado é a correção mais confiável.
- Marrons escuros e quentes, como o café expresso, ficam melhores sobre bege do que o preto puro, e texto branco raramente funciona nele.
- Degradês de areia vão do creme claro a um dourado tostado, como uma duna escurece no lado da sombra.

Um **degradê bege** mistura neutros quentes, creme, areia, aveia e linho, de um tom claro para um um pouco mais profundo, todos com o mesmo subtom. Bem feito, ele transmite calma, naturalidade e um luxo discreto, e por isso skincare, decoração, casamentos e moda lenta adoram. Mal feito, parece o scan de um envelope velho. A diferença está em três escolhas: um subtom, amplitude suficiente e um pouco de textura. Os códigos de cada visual vêm a seguir.

## Escolha um subtom antes de uma cor

Todo bege puxa para algum lado. Beges rosados são suaves e lembram pele. Beges amarelados são ensolarados e lembram areia. Beges acinzentados, muitas vezes chamados de greige, são arquitetônicos e frios. Misturar subtons num mesmo degradê é o principal motivo de o bege parecer sujo: uma parada rosada ao lado de uma cinza parece mancha, não transição. Decida primeiro e depois não saia dali.

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

Três famílias de subtom: rosado no par bege rosado, amarelado no par areia, acinzentado em greige e pedra. Linho e café funcionam com as três.

## Códigos de degradê areia

Um **degradê areia** segue uma duna: claro e cremoso no lado voltado para o sol, mais profundo e dourado no lado da sombra. São os beges mais quentes daqui e os mais fáceis de usar, porque o subtom amarelado impede que fiquem acinzentados.

- 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 visuais de areia. Sombra da duna tem a maior amplitude e se sustenta melhor em tamanhos pequenos; Meio-dia no deserto é o mais claro e combina com texto escuro em qualquer ponto.

## Códigos de linho, aveia e pedra

Estes são os beges mais discretos, mais perto do creme e do greige. São ótimos fundos para fotos de produto e textos longos, porque ficam em segundo plano e deixam o resto se destacar. Linho é o mais sutil, quase nem é um degradê; bege rosado traz o subtom rosado; pedra é o mais frio, quase cinza.

- 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 degradê bege parece uma cor chapada na sua tela, a amplitude está pequena demais: escureça a última parada.

Para a família mais ampla de tons calmos, veja [paletas de cores neutras](https://gradiently.design/pt-br/guide/neutral-color-palettes) e [cores terrosas](https://gradiently.design/pt-br/guide/earth-tone-colors). Quando quiser o lado mais profundo da mesma família, café e caramelo, os códigos de [degradê marrom](https://gradiently.design/pt-br/guide/brown-gradient) continuam de onde estes param.

## Por que degradês bege criam faixas e como corrigir

Degradês claros com pouca amplitude passam por poucos valores de cor distintos, então a tela os desenha em degraus visíveis, e a compressão pesada piora tudo. O bege é especialmente propenso a isso. Uma camada fina de granulado quebra os degraus e, de quebra, faz o bege parecer papel, gesso ou tecido em vez de uma cor de tela. [Faixas em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) explica a causa em detalhe.

```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 degradê areia com uma camada de ruído SVG multiplicada por cima. Aumente a opacidade para uma superfície mais áspera, com mais cara de papel.

Mais receitas de granulado, e com que intensidade usar, estão em [gradientes granulados](https://gradiently.design/pt-br/guide/grainy-gradients). Os Marks do Gradiently trazem o granulado como parte da receita, então um Mark bege chega com a textura já equilibrada em todos os tamanhos.

## Cores de texto que combinam com bege

| Tinta | Hex | Efeito | Use para |
| --- | --- | --- | --- |
| Café expresso | `#3b2a1e` | Quente e suave, ainda muito legível | Títulos e texto em qualquer bege |
| Carvão | `#2b2b2b` | Nítido e moderno | Fundos pedra e greige |
| Oliva escuro | `#3d4a2f` | Natural, um pouco inesperado | Fundos areia e aveia |
| Terracota | `#a4502f` | Destaque quente | Só títulos grandes e preços |
| Branco | `#ffffff` | Fraco sobre bege claro | Só títulos grandes nas paradas mais profundas da sombra da duna |

O preto funciona, mas o marrom café mantém o design inteiro na mesma família quente.

## Bege que parece calmo, não sem graça

### Parece sem graça

- Beges rosados, amarelados e acinzentados na mesma transição
- Duas paradas tão próximas que a transição some
- Uma superfície digital lisa com faixas visíveis
- Texto preto puro e layout carregado
- Texto branco sobre areia clara

### Parece calmo

- Um único subtom em todas as paradas
- Uma amplitude clara do creme à areia tostada
- Um granulado fino que parece papel ou gesso
- Texto café e espaço generoso
- Tinta escura, com um destaque terracota

O bege recompensa a contenção. Poucas palavras, muito espaço e uma boa foto de produto parecem mais caros do que qualquer quantidade de decoração. Esse é o visual por trás da maioria dos bons [designs para marcas de skincare](https://gradiently.design/pt-br/guide/skincare-brand-design), e ele funciona bem também em papelaria de casamento e estúdios de interiores.

Um post em retrato sobre um fundo quente cor de areia com as palavras Menos, porém melhor em marrom escuro

Um post de lançamento de skincare sobre um Mark areia. Texto café, uma linha, muito respiro.

## Onde um degradê bege faz diferença

O bege trabalha melhor quando apoia outra coisa: um produto, uma fotografia, poucas palavras bem escolhidas. Alguns lugares onde ele brilha, com os tamanhos para criar:

- **Fotos de produto:** um degradê linho ou aveia atrás de um frasco ou de uma peça de cerâmica, em 2048×2048 para uma imagem de produto na Shopify, mantém o objeto como protagonista.
- **Papelaria de casamento:** bege rosado ou areia para convites de 5×7 pol (1500×2100 a 300 dpi), com texto café ou oliva escuro. Mais ideias em [paletas de cores para casamento](https://gradiently.design/pt-br/guide/wedding-color-palettes).
- **Interiores e arquitetura:** degradês pedra e greige para capas de portfólio e posts de projetos, em que a fotografia traz a cor. Veja [identidade visual para designers de interiores](https://gradiently.design/pt-br/guide/interior-designer-branding).
- **Seções de site:** um degradê linho atrás de um depoimento ou de uma tabela de preços separa a seção das partes brancas sem uma borda dura.
- **Um feed do Instagram calmo:** alterne posts areia com fotos e o feed parece um todo pensado.

Como o bege é muito sutil, o mesmo degradê pode ficar certo num story e lavado num banner largo. Renderize para cada formato em vez de esticar um arquivo e confira a parada mais clara num celular com brilho máximo, onde o bege pálido pode virar branco puro.

## FAQ

### Quais cores formam um degradê bege?

Tons de creme, areia, aveia e linho com um único subtom, por exemplo #f6ead6 para #e8cfa8 para #c9a273 num degradê areia quente.

### Por que meu degradê bege parece sujo?

Normalmente é mistura de subtons, como um bege rosado ao lado de um acinzentado. Mantenha todas as paradas na mesma família.

### Que cor de fonte usar sobre fundo bege?

Um marrom escuro e quente, como o café #3b2a1e, é bem legível e mais suave que o preto. Carvão combina com os tons greige mais frios.

### Como evitar faixas num degradê claro?

Aumente a amplitude entre a primeira e a última parada, acrescente uma camada fina de granulado sobre o degradê e exporte em PNG em vez de um JPEG comprimido.