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.
On this page
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 shows the effect side by side.
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.
Cafés and roasters will find a complete identity built on these tones in coffee shop branding, and bag and label ideas in 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.
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.
To widen these into a full scheme, see earth tone colours and autumn colour palettes. For the lighter end of the family, sand and oat, the 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.
.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%);
}CSS gradients in OKLCH explains the colour space and when it is worth the extra line.
What to pair with a brown gradient
#f6efe4Mood
Try it on
Hex
#a3b18aMood
Try it on
Hex
#8aa1b4Mood
Try it on
#d6a23aMood
Try it on
#e8c4b8Mood
Try it on
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 has a month of posts that suit these tones.
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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile