# Degradê marrom: códigos de café, caramelo e terra

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

O marrom tem fama de sem graça, mas quase todo bom degradê marrom está escondido numa xícara de café ou num ateliê de cerâmica. Veja como mantê-lo quente, com códigos para cada clima.

## The short version

- Marrom é um laranja escuro e pouco saturado, então um bom degradê marrom mantém um matiz laranja ou vermelho do começo ao fim.
- Degradês marrons parecem sem vida quando puxam para o cinza ou o verde; parecem ricos quando continuam quentes.
- Degradês de café vão do espresso quase preto a uma crema clara, enquanto degradês de caramelo ficam mais claros e dourados.
- Interpolar um degradê marrom em OKLCH impede que o meio fique apagado, o que é útil em misturas longas.
- Creme, verde-sálvia, azul acinzentado e mostarda são parceiros confiáveis do marrom para texto e destaques.

Um **degradê marrom** é, na verdade, um laranja escuro e suavizado que vai do profundo ao claro: espresso virando crema, chocolate virando caramelo, argila virando areia. Mantenha esse matiz quente em todas as paradas e o marrom fica rico, aconchegante e artesanal. Deixe-o escorregar para o cinza ou o verde e ele parece lama. Abaixo estão códigos de marrom café, caramelo, chocolate, terra e uísque, e as combinações que funcionam com eles.

## Por que degradês marrons ficam encardidos

Não existe marrom no arco-íris. O que chamamos de marrom é laranja ou vermelho com a luminosidade baixa e a saturação suavizada. Isso tem uma consequência prática: se uma parada do degradê perde o calor, por ter cinza demais ou um toque de verde, a mistura inteira parece suja. Mantenha todas as paradas do lado quente e escureça baixando a luminosidade, em vez de adicionar preto. [Degradês encardidos](https://gradiently.design/pt-br/guide/muddy-gradients) mostra o efeito lado a lado.

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

Uma família de marrons quentes. Cada amostra, até a mais escura, ainda tem um pouco de laranja.

Você pode montar o seu próprio degradê marrom a partir de qualquer laranja num seletor de cores que mostre matiz, saturação e luminosidade. São quatro movimentos:

1. **Escolha um matiz quente** Escolha um matiz entre uns 20 e 40 graus: mais baixo para marrons avermelhados, como tijolo e terracota, mais alto para os dourados, como caramelo.
2. **Suavize a saturação** Baixe a saturação para algo entre 35% e 65%. Totalmente saturado, continua laranja; baixo demais, vira cinza.
3. **Defina três paradas de luminosidade** Use o mesmo matiz em três níveis de luminosidade, por exemplo 10%, 30% e 60%. É essa distância que torna a mistura visível.
4. **Esquente um pouco a ponta clara** Desloque a parada mais clara alguns graus em direção ao amarelo. A luz real sobre madeira, café ou argila parece mais quente nos pontos de brilho.

## Códigos de degradê cor de café

Os marrons de café são os mais úteis do conjunto. O espresso é quase preto e sustenta texto claro com profundidade de verdade. A crema vai da espuma clara no topo da xícara até o café embaixo. O mocha fica no meio e é um fundo forte e neutro para cardápios e tabelas de preço.

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

Três degradês de café. A crema escorrendo pede texto escuro em cima e texto claro embaixo, então coloque as palavras numa única zona.

Cafeterias e torrefações encontram uma identidade completa construída com esses tons em [branding para cafeteria](https://gradiently.design/pt-br/guide/coffee-shop-branding), e ideias de pacotes e rótulos em [embalagem para torrefação de café](https://gradiently.design/pt-br/guide/coffee-roaster-packaging).

## Códigos de degradê caramelo e chocolate

O caramelo é o marrom no seu lado mais dourado e simpático. Ele brilha, o que o torna ideal para padarias, mel, ofertas de outono e qualquer coisa doce. O chocolate é o oposto: profundo, lustroso e indulgente. Um degradê radial com um brilho suave dá ao chocolate o reflexo que ele 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 amargo: `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%)`

Marrons doces e indulgentes. O uísque é um caramelo iluminado por dentro, o degradê mais dramático deste artigo.

## Degradês de terra, argila e terracota

Os marrons terrosos puxam para o vermelho e parecem feitos à mão: argila, tijolo, couro, nogueira. Combinam com cerâmica, lojas de plantas, equipamentos para atividades ao ar livre e qualquer coisa com clima natural ou mediterrâneo. A terracota, em especial, virou favorita de marcas quentes e modernas porque parece terrosa e fresca ao mesmo tempo.

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

Marrons terrosos. A terracota é a mais viva e a que menos precisa da ajuda de destaques.

Para ampliar esses tons num esquema completo, veja [cores terrosas](https://gradiently.design/pt-br/guide/earth-tone-colors) e [paletas de cores de outono](https://gradiently.design/pt-br/guide/autumn-color-palettes). Para o lado mais claro da família, areia e aveia, os códigos de [degradê bege](https://gradiently.design/pt-br/guide/beige-gradient) continuam a partir da argila do deserto.

## Mantendo quente uma mistura longa de marrom em CSS

Os degradês do navegador misturam em sRGB por padrão, e uma mistura longa de um marrom profundo até um caramelo claro pode afundar num meio levemente acinzentado. Pedir ao navegador para interpolar em OKLCH mantém o matiz e o croma mais estáveis de ponta a ponta. Isso é suportado nas versões atuais dos principais navegadores, e o fallback em hex cobre o resto.

```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 para caramelo, escrita duas vezes. Os navegadores que entendem a segunda linha a usam; os outros ficam com a primeira.

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

## O que combinar com um degradê marrom

| Parceiro | Hex | Clima | Experimente em |
| --- | --- | --- | --- |
| Creme | `#f6efe4` | Clássico, aconchegante | Cardápios de cafeteria, posts de padaria |
| Verde-sálvia | `#a3b18a` | Natural, calmo | Lojas de plantas, bem-estar, chá |
| Azul acinzentado | `#8aa1b4` | Fresco, inesperado | Cerâmica, jeans, artigos para casa |
| Mostarda | `#d6a23a` | Retrô, quente | Discos, vintage, promoções de outono |
| Rosa blush | `#e8c4b8` | Suave, moderno | Beleza, velas, papelaria |

Use o parceiro no texto ou num único destaque. O azul é a escolha mais ousada porque fica oposto ao laranja, e por isso faz o marrom parecer mais quente.

## Um degradê marrom num post de verdade

Fundos marrons carregam muito bem notícias quentes do dia a dia: uma torra nova, uma fornada da estação, uma oficina. Texto creme na parte escura é a escolha segura, e um destaque mostarda ou caramelo numa palavra dá um pouco de energia. [Ideias de Instagram para padaria](https://gradiently.design/pt-br/guide/bakery-instagram-ideas) tem um mês de posts que combinam com esses tons.

Um post vertical com fundo marrom café profundo e as palavras Torra nova, terça em texto creme

O anúncio de uma torrefação num Mark cor de café. O texto creme fica na parte mais escura do fundo.

Se você posta toda semana, a parte difícil é manter todos os posts no mesmo marrom quente. Com o Gradiently, você escolhe um Mark marrom quente uma vez e todo template, story e cardápio passa a usá-lo, e a tinta automática escolhe texto creme ou espresso para cada linha, para que nada se perca nos cantos mais escuros.

## FAQ

### Quais cores formam um degradê marrom?

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

### Por que o meu degradê marrom parece sem vida?

Uma ou mais paradas puxaram para o cinza ou o verde. Escureça os marrons baixando a luminosidade em vez de adicionar preto, e mantenha o matiz quente.

### Qual cor de texto usar sobre fundo marrom?

Creme ou branco quente sobre marrons escuros, e espresso ou grafite sobre caramelo claro e areia. Mostarda funciona para uma única palavra de destaque.

### Qual é um bom degradê cor de café?

Experimente `linear-gradient(180deg, #f3e3cc 0%, #c99a6b 45%, #6b3f26 100%)`, que vai da crema em cima até o café embaixo.