# Brown gradient: coffee, caramel and earth codes

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

Brown has a reputation for looking drab, but almost every good brown gradient is hiding in a coffee cup or a pottery studio. Here is how to keep it warm, with codes for each mood.

## The short version

- Brown is a dark, low saturation orange, so a good brown gradient keeps an orange or red hue all the way through.
- Brown gradients look drab when they drift towards grey or green; they look rich when they stay warm.
- Coffee gradients move from near black espresso to a pale crema, while caramel gradients sit lighter and more golden.
- Interpolating a brown gradient in OKLCH keeps the middle from going dull, which is useful for long blends.
- Cream, sage green, dusty blue and mustard are reliable partners for brown in type and accents.

A **brown gradient** is really a dark, softened orange blended from deep to light: espresso into crema, chocolate into caramel, clay into sand. Keep that warm hue running through every stop and brown looks rich, cosy and crafted. Let it slip towards grey or green and it looks like mud. Below are codes for coffee, caramel, chocolate, earth and whisky browns, and the pairings that suit them.

## Why brown gradients go muddy

There is no brown in the rainbow. What we call brown is orange or red with the lightness turned down and the saturation softened. That has a practical consequence: if a stop in your gradient loses its warmth, because it has too much grey or a hint of green, the whole blend reads as dirty. Keep every stop on the warm side, and darken by lowering lightness rather than adding black. [Muddy gradients](https://gradiently.design/guide/muddy-gradients) shows the effect side by side.

- Espresso: #1b0f0a
- Dark roast: #3b2216
- Coffee: #6b3f26
- Toffee: #a85f24
- Caramel: #e0a15a
- Terracotta: #c0603a
- Crema: #f3e3cc

A warm brown family. Every swatch, even the darkest, still has a little orange in it.

You can build a brown gradient of your own from any orange in a colour picker that shows hue, saturation and lightness. It takes four moves:

1. **Pick a warm hue** Choose a hue between about 20 and 40 degrees: lower for reddish browns like brick and terracotta, higher for golden ones like caramel.
2. **Soften the saturation** Bring saturation down to somewhere between 35% and 65%. Fully saturated, it stays orange; too low, it turns grey.
3. **Set three lightness stops** Use the same hue at three lightness levels, for example 10%, 30% and 60%. That spread is what makes the blend visible.
4. **Nudge the light end warmer** Shift the lightest stop a few degrees towards yellow. Real light on wood, coffee or clay looks warmer in the highlights.

## Coffee gradient codes

Coffee browns are the most useful of the set. Espresso is almost black and carries light type with real depth. Crema pour runs from the pale foam at the top of a cup into the coffee beneath. Mocha sits in between and makes a strong, neutral background for menus and price lists.

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

Three coffee gradients. Crema pour needs dark type at the top and light type at the bottom, so place the words in one zone only.

Cafés and roasters will find a complete identity built on these tones in [coffee shop branding](https://gradiently.design/guide/coffee-shop-branding), and bag and label ideas in [coffee roaster packaging](https://gradiently.design/guide/coffee-roaster-packaging).

## Caramel and chocolate gradient codes

Caramel is brown at its most golden and friendly. It glows, which makes it ideal for bakeries, honey, autumn offers and anything sweet. Chocolate is the opposite: deep, glossy and indulgent. A radial gradient with a soft highlight gives chocolate the sheen it has in real life.

- Caramel: `linear-gradient(160deg, #fbe3b8 0%, #e0a15a 45%, #a85f24 100%)`
- Toffee: `linear-gradient(180deg, #d99a4e 0%, #a8652a 50%, #5c3415 100%)`
- Dark chocolate: `radial-gradient(circle at 30% 30%, #6b3a22 0%, #3a1d10 50%, #160905 100%)`
- Whisky in the glass: `radial-gradient(ellipse at 60% 30%, #f0b45c 0%, #b8661e 35%, #5a2a0c 70%, #1f0d04 100%)`

Sweet and indulgent browns. Whisky is a caramel lit from within, the most dramatic gradient in this article.

## Earth, clay and terracotta gradients

Earth browns lean red and feel handmade: clay, brick, leather, walnut. They suit ceramics, plant shops, outdoor gear and anything with a natural or Mediterranean feel. Terracotta in particular has become a favourite for warm, modern brands because it reads as both earthy and fresh.

- Terracotta: `linear-gradient(150deg, #e9a27c 0%, #c0603a 50%, #7a3520 100%)`
- Desert clay: `linear-gradient(180deg, #e7c3a1 0%, #b97a52 55%, #6e4129 100%)`
- Walnut and leather: `linear-gradient(135deg, #4a2c1a 0%, #7b4a2b 50%, #b07a4f 100%)`

Earth browns. Terracotta is the brightest and needs the least help from accents.

To widen these into a full scheme, see [earth tone colours](https://gradiently.design/guide/earth-tone-colors) and [autumn colour palettes](https://gradiently.design/guide/autumn-color-palettes). For the lighter end of the family, sand and oat, the [beige gradient](https://gradiently.design/guide/beige-gradient) codes pick up from desert clay.

## Keeping a long brown blend warm in CSS

Browser gradients blend in sRGB by default, and a long blend from a deep brown to a pale caramel can sag into a slightly greyish middle. Asking the browser to interpolate in OKLCH keeps the hue and chroma steadier from end to end. It is supported in current versions of the major browsers, and the hex fallback covers the rest.

```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%);
}
```

The same espresso to caramel blend, written twice. Browsers that understand the second line use it; others keep the first.

[CSS gradients in OKLCH](https://gradiently.design/guide/css-gradient-oklch) explains the colour space and when it is worth the extra line.

## What to pair with a brown gradient

| Partner | Hex | Mood | Try it on |
| --- | --- | --- | --- |
| Cream | `#f6efe4` | Classic, cosy | Café menus, bakery posts |
| Sage green | `#a3b18a` | Natural, calm | Plant shops, wellness, tea |
| Dusty blue | `#8aa1b4` | Fresh, unexpected | Ceramics, denim, homeware |
| Mustard | `#d6a23a` | Retro, warm | Records, vintage, autumn sales |
| Blush | `#e8c4b8` | Soft, modern | Beauty, candles, stationery |

Use the partner for type or one accent. Blue is the boldest choice because it sits opposite orange, so it makes brown look warmer.

## A brown gradient in a real post

Brown backgrounds carry warm, everyday news particularly well: a new roast, a seasonal bake, a workshop. Cream type on the deep end is the safe choice, and a mustard or caramel accent for one word adds a little energy. [Bakery Instagram ideas](https://gradiently.design/guide/bakery-instagram-ideas) has a month of posts that suit these tones.

A portrait post with a deep coffee brown background and the words New roast, Tuesday in cream type

A roaster's announcement in a coffee coloured Mark. Cream type sits on the darkest part of the background.

If you post weekly, the hard part is keeping every post in the same warm brown. With Gradiently, you choose a warm brown Mark once and every template, story and menu wears it, and Auto ink picks cream or espresso type for each line so nothing is lost in the darker corners.

## FAQ

### What colours make a brown gradient?

Warm browns from one family, such as espresso #1b0f0a, coffee #6b3f26 and caramel #e0a15a. Keep every stop on the orange or red side so the blend stays rich.

### Why does my brown gradient look dull?

One or more stops have drifted towards grey or green. Darken browns by lowering lightness rather than adding black, and keep the hue warm.

### What colour text goes on a brown background?

Cream or warm white on dark browns, and espresso or charcoal on light caramel and sand. Mustard works for a single accent word.

### What is a good coffee colour gradient?

Try `linear-gradient(180deg, #f3e3cc 0%, #c99a6b 45%, #6b3f26 100%)`, which runs from crema at the top to coffee at the bottom.