# Gradiente castanho: códigos de café, caramelo e terra

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

O castanho tem fama de ser baço, mas quase todos os bons gradientes castanhos escondem-se numa chávena de café ou num ateliê de cerâmica. Veja como o manter quente, com códigos para cada ambiente.

## The short version

- O castanho é um laranja escuro e pouco saturado, por isso um bom gradiente castanho mantém um matiz laranja ou vermelho do princípio ao fim.
- Os gradientes castanhos parecem baços quando derivam para o cinzento ou o verde; parecem ricos quando se mantêm quentes.
- Os gradientes de café vão do espresso quase preto a um creme pálido, enquanto os de caramelo ficam mais claros e dourados.
- Interpolar um gradiente castanho em OKLCH impede que o meio fique baço, o que é útil em misturas longas.
- Creme, verde-sálvia, azul empoeirado e mostarda são parceiros fiáveis do castanho no texto e nos acentos.

Um **gradiente castanho** é, no fundo, um laranja escuro e suavizado, misturado do profundo ao claro: espresso a desfazer-se em creme, chocolate em caramelo, argila em areia. Mantenha esse matiz quente em todas as paragens e o castanho parece rico, aconchegante e artesanal. Deixe-o escorregar para o cinzento ou o verde e parece lama. Abaixo ficam códigos para castanhos de café, caramelo, chocolate, terra e uísque, e as combinações que lhes assentam.

## Porque é que os gradientes castanhos ficam lamacentos

Não há castanho no arco-íris. O que chamamos castanho é laranja ou vermelho com a luminosidade baixada e a saturação suavizada. Isto tem uma consequência prática: se uma paragem do gradiente perde calor, por ter cinzento a mais ou um toque de verde, a mistura inteira parece suja. Mantenha todas as paragens do lado quente e escureça baixando a luminosidade em vez de juntar preto. [Gradientes lamacentos](https://gradiently.design/pt-pt/guide/muddy-gradients) mostra o efeito lado a lado.

- Espresso: #1b0f0a
- Torra escura: #3b2216
- Café: #6b3f26
- Toffee: #a85f24
- Caramelo: #e0a15a
- Terracota: #c0603a
- Creme: #f3e3cc

Uma família de castanhos quentes. Todas as amostras, mesmo a mais escura, ainda têm um pouco de laranja.

Pode construir o seu gradiente castanho a partir de qualquer laranja, num seletor de cor que mostre matiz, saturação e luminosidade. São quatro passos:

1. **Escolha um matiz quente** Escolha um matiz entre cerca de 20 e 40 graus: mais baixo para castanhos avermelhados, como tijolo e terracota, mais alto para os dourados, como o caramelo.
2. **Suavize a saturação** Baixe a saturação para algo entre 35% e 65%. Totalmente saturado, fica laranja; demasiado baixa, fica cinzento.
3. **Defina três paragens de luminosidade** Use o mesmo matiz em três níveis de luminosidade, por exemplo 10%, 30% e 60%. É essa amplitude que torna a mistura visível.
4. **Aqueça um pouco a ponta clara** Desloque a paragem mais clara uns graus para o amarelo. A luz real sobre madeira, café ou argila parece mais quente nos realces.

## Códigos de gradiente de café

Os castanhos de café são os mais úteis do conjunto. O espresso é quase preto e sustenta texto claro com verdadeira profundidade. O creme a escorrer vai da espuma pálida no topo da chávena até ao café por baixo. O moca fica a meio e dá um fundo forte e neutro para ementas e listas de preços.

- Espresso: `linear-gradient(160deg, #1b0f0a 0%, #3b2216 50%, #6b3f26 100%)`
- Creme a escorrer: `linear-gradient(180deg, #f3e3cc 0%, #c99a6b 45%, #6b3f26 100%)`
- Moca: `linear-gradient(135deg, #2a1810 0%, #5a3522 45%, #9b6a4a 100%)`

Três gradientes de café. O creme a escorrer pede texto escuro no topo e claro em baixo, por isso ponha as palavras numa só zona.

Cafés e torrefatores encontram uma identidade completa construída sobre estes tons em [marca para cafés](https://gradiently.design/pt-pt/guide/coffee-shop-branding), e ideias de saquetas e rótulos em [embalagem para torrefatores de café](https://gradiently.design/pt-pt/guide/coffee-roaster-packaging).

## Códigos de gradiente de caramelo e chocolate

O caramelo é o castanho no seu mais dourado e simpático. Brilha, o que o torna ideal para pastelarias, mel, ofertas de outono e tudo o que seja doce. O chocolate é o oposto: profundo, lustroso e guloso. Um gradiente radial com um realce suave dá ao chocolate o brilho que tem na vida real.

- Caramelo: `linear-gradient(160deg, #fbe3b8 0%, #e0a15a 45%, #a85f24 100%)`
- Toffee: `linear-gradient(180deg, #d99a4e 0%, #a8652a 50%, #5c3415 100%)`
- Chocolate preto: `radial-gradient(circle at 30% 30%, #6b3a22 0%, #3a1d10 50%, #160905 100%)`
- Uísque no copo: `radial-gradient(ellipse at 60% 30%, #f0b45c 0%, #b8661e 35%, #5a2a0c 70%, #1f0d04 100%)`

Castanhos doces e guloseimas. O uísque é um caramelo iluminado por dentro, o gradiente mais dramático deste artigo.

## Gradientes de terra, argila e terracota

Os castanhos de terra puxam ao vermelho e parecem feitos à mão: argila, tijolo, cabedal, nogueira. Assentam em cerâmica, lojas de plantas, equipamento de exterior e tudo com um ar natural ou mediterrânico. A terracota, em particular, tornou-se favorita de marcas quentes e modernas, porque parece ao mesmo tempo terrosa e fresca.

- Terracota: `linear-gradient(150deg, #e9a27c 0%, #c0603a 50%, #7a3520 100%)`
- Argila do deserto: `linear-gradient(180deg, #e7c3a1 0%, #b97a52 55%, #6e4129 100%)`
- Nogueira e cabedal: `linear-gradient(135deg, #4a2c1a 0%, #7b4a2b 50%, #b07a4f 100%)`

Castanhos de terra. A terracota é o mais brilhante e precisa de menos ajuda dos acentos.

Para os alargar a um esquema completo, veja [cores de tons terrosos](https://gradiently.design/pt-pt/guide/earth-tone-colors) e [paletas de cores de outono](https://gradiently.design/pt-pt/guide/autumn-color-palettes). Para a ponta mais clara da família, areia e aveia, os códigos do [gradiente bege](https://gradiently.design/pt-pt/guide/beige-gradient) continuam a partir da argila do deserto.

## Manter quente uma mistura castanha longa em CSS

Os gradientes do navegador misturam em sRGB por defeito, e uma mistura longa de um castanho profundo a um caramelo pálido pode ceder para um meio ligeiramente acinzentado. Pedir ao navegador que interpole em OKLCH mantém o matiz e a croma mais estáveis de ponta a ponta. É suportado nas versões atuais dos principais navegadores, e a alternativa em hex cobre os restantes.

```css
.brown-hero {
  /* fallback for older browsers */
  background: linear-gradient(160deg, #2a1810 0%, #a85f24 55%, #fbe3b8 100%);
  /* steadier warmth through the middle */
  background: linear-gradient(160deg in oklch, oklch(0.24 0.04 45) 0%, oklch(0.52 0.11 55) 55%, oklch(0.92 0.06 80) 100%);
}
```

A mesma mistura de espresso a caramelo, escrita duas vezes. Os navegadores que entendem a segunda linha usam-na; os outros ficam com a primeira.

[Gradientes CSS em OKLCH](https://gradiently.design/pt-pt/guide/css-gradient-oklch) explica o espaço de cor e quando vale a linha extra.

## O que combinar com um gradiente castanho

| Parceiro | Hex | Ambiente | Experimente em |
| --- | --- | --- | --- |
| Creme | `#f6efe4` | Clássico, aconchegante | Ementas de café, publicações de pastelaria |
| Verde-sálvia | `#a3b18a` | Natural, calmo | Lojas de plantas, bem-estar, chá |
| Azul empoeirado | `#8aa1b4` | Fresco, inesperado | Cerâmica, ganga, artigos para o lar |
| Mostarda | `#d6a23a` | Retro, quente | Discos, vintage, saldos de outono |
| Rosado | `#e8c4b8` | Suave, moderno | Beleza, velas, papelaria |

Use o parceiro para o texto ou um só acento. O azul é a escolha mais ousada porque fica oposto ao laranja, o que faz o castanho parecer mais quente.

## Um gradiente castanho numa publicação real

Os fundos castanhos transportam particularmente bem notícias quentes e do dia a dia: uma nova torra, uma fornada sazonal, uma oficina. Texto creme na ponta escura é a escolha segura, e um acento mostarda ou caramelo numa palavra traz um pouco de energia. [Ideias de Instagram para pastelarias](https://gradiently.design/pt-pt/guide/bakery-instagram-ideas) tem um mês de publicações que assentam nestes tons.

Uma publicação vertical com fundo castanho café profundo e as palavras Nova torra, terça-feira em texto creme

O anúncio de um torrefator num Mark cor de café. O texto creme assenta na parte mais escura do fundo.

Se publica toda a semana, a parte difícil é manter todas as publicações no mesmo castanho quente. Com o Gradiently, escolhe um Mark castanho quente uma vez e todos os modelos, stories e ementas o vestem, e a Tinta automática escolhe texto creme ou espresso para cada linha, para que nada se perca nos cantos mais escuros.

## FAQ

### Que cores formam um gradiente castanho?

Castanhos quentes da mesma família, como espresso #1b0f0a, café #6b3f26 e caramelo #e0a15a. Mantenha todas as paragens do lado laranja ou vermelho para a mistura continuar rica.

### Porque é que o meu gradiente castanho parece baço?

Uma ou mais paragens derivaram para o cinzento ou o verde. Escureça os castanhos baixando a luminosidade em vez de juntar preto, e mantenha o matiz quente.

### Que cor de texto vai num fundo castanho?

Creme ou branco quente sobre castanhos escuros, e espresso ou carvão sobre caramelo claro e areia. A mostarda funciona para uma só palavra de destaque.

### Qual é um bom gradiente de cor de café?

Experimente `linear-gradient(180deg, #f3e3cc 0%, #c99a6b 45%, #6b3f26 100%)`, que vai do creme no topo ao café em baixo.