Brown Color Palette: 6 Warm Earthy Schemes with Hex Codes

Brown is having a moment. Once overlooked, the brown color palette is now everywhere in modern design — and for good reason. Brown is warm, grounding, and quietly premium, the colour of coffee, leather, chocolate, and rich wood. It works as a sophisticated alternative to grey and brings instant cosiness to interiors, branding, and websites alike.

Here are six ready-to-use brown palettes with hex codes, plus copy-paste CSS. For more warm, earthy combinations, see our boho color palette and fall color palette, or browse the full PaletteCSS library.

Why brown works as a modern neutral

Like grey, brown is a neutral — but a warm one. That warmth is the whole point: where grey can feel cold or corporate, brown feels organic, human, and expensive. It pairs effortlessly with cream and beige for a soft, tonal look, or with deep charcoal for contrast. A well-built brown palette usually runs from a pale, milky tone down to a deep espresso, giving you a full range for backgrounds, text, and accents.

Brown pairs especially well with:

• Cream and beige — for a soft, monochromatic, luxurious feel.
• Sage or olive green — earthy and natural.
• Terracotta and rust — warm, boho-leaning combinations.
• Gold accents — for a premium, editorial look.

6 brown color palettes (with hex codes)

1. Coffee & Cream

Soft, milky browns — warm and inviting.

#F5EBE0 · #E3D5C5 · #C8A98A · #8B6F52 · #4A3728

2. Chocolate

Rich, deep browns for a decadent feel.

#EFE6DD · #C9A37E · #9C6B3F · #6B4226 · #3E2A1E

3. Warm Neutral Brown

A balanced everyday brown scale.

#F3EDE4 · #D7C4AE · #B08968 · #7F5539 · #4A2F1B

4. Mocha

Muted, milky-coffee tones — very on-trend.

#EAE0D5 · #C7B299 · #A47551 · #7A5230 · #4B3621

5. Tan & Taupe

Soft, sophisticated, and ideal for minimalist design.

#F0E9E0 · #D2C2B0 · #A89078 · #6F5B45 · #423324

6. Earthy Brown

Natural, grounded browns with depth.

#EDE0D4 · #C6A985 · #9A6F4E · #5E4231 · #2E2018

How to use brown in CSS

Brown makes an excellent numbered neutral scale:

:root {
  --brown-50:  #F5EBE0;
  --brown-200: #E3D5C5;
  --brown-400: #C8A98A;
  --brown-600: #8B6F52;
  --brown-900: #4A3728;
}

body { background: var(--brown-50); color: var(--brown-900); }

A subtle brown gradient feels warm and premium:

.section {
  background: linear-gradient(160deg, #F5EBE0 0%, #C8A98A 100%);
}

Tips for designing with brown

• Build a full range. Use a pale cream-brown for backgrounds and a deep espresso for text.
• Keep it warm. Stick to browns with warm (red or yellow) undertones for a cosy, premium feel.
• Add one accent. Gold, sage, or terracotta lifts an all-brown palette.
• Use generous whitespace. Browns look richest with plenty of breathing room around them.

Frequently asked questions

What is a good brown hex code?

A versatile mid brown is #8B6F52; for a soft background try #F5EBE0, and for deep text use #4A3728. Together they form a complete brown scale.

What colors go with brown?

Brown pairs beautifully with cream, beige, sage green, terracotta, and gold. These warm, earthy tones keep its cosy, natural character.

Is brown a good website color?

Yes — brown is a warm, premium neutral that works well for lifestyle, food, fashion, and editorial sites, especially paired with cream backgrounds and dark brown text.

Want more warm neutrals? Explore kitchen color palettes, browse color palettes on PaletteCSS, or copy any brown hex instantly.