Coffee color palettes

Where coffee palettes work

• Cafés, roasters and bakery sites
• Bookshops, stationery and leather-goods stores
• Warm dark themes for portfolios and reading apps

From bean to milk: three families

About three quarters of the swatches in these 110 palettes are red-brown or orange-brown, with very few cool colors. Most palettes belong to one of three families, and each solves a different problem.

• Roast ramp, dark to caramel: #1C0A00, #361500, #603601, #CC9544. The base for a dark theme.
• Latte, all midtones and light: #AD8B73, #CEAB93, #E3CAA5, #FFFBE9. Soft, but has no text color.
• Terracotta and rust: #8E3200, #A64B2A, #D7A86E, #FFEBC1. The most practical for a light site.

A dark café theme from the roast ramp

Use #1C0A00 for the page and #361500 for cards. Caramel #CC9544 is the accent and stays readable on both, at 7.27:1 and 6.29:1, so it can carry links and headings. For body text borrow the off-white from the latte palette: #FFFBE9 is 18.51:1 on the page.

The middle brown is the weak spot. #603601 is 1.60:1 against #361500, so it works for hover fills and subtle dividers but cannot mark a boundary that people need to see. Caramel on #603601 is 3.92:1: large text only.

[data-theme="dark"] {
  --bg: #1c0a00;
  --card: #361500;
  --hover: #603601;  /* 1.60:1 vs card, fills only */
  --accent: #cc9544; /* 7.27:1 on --bg */
  --text: #fffbe9;   /* 18.51:1 on --bg */
}

Light mode: why latte palettes need help

The latte family is pleasant but hard to build with, because every swatch is a midtone or lighter. #AD8B73 on #FFFBE9 is 3.01:1, and white on #AD8B73 is 3.13:1, so it fails as normal-size text in either direction.

The terracotta palette fills the gap. Sienna #A64B2A takes white labels at 5.74:1 and works as link text on #FFEBC1 at 4.89:1, while rust #8E3200 gives 6.87:1 for headings. Keep latte tones for backgrounds and cards, and take text and buttons from the rust end.

Pairing the colors

Use the darkest brown for text or for the page, cream for the opposite role, and caramel or sienna for actions. Add one cool color, such as a muted teal, if sections start to blend together.

Contrast and readability

Neighboring browns are close in value: #603601 on #361500 is 1.60:1. Keep at least one large jump between text and background, such as #FFFBE9 on #361500 at 16.00:1, and use caramel for accents rather than body text on mid-browns.

Questions

What colors go with coffee brown?

Cream and off-white for surfaces, a darker espresso for text, and one cool color to break up the browns, such as a muted teal like #54BAB9 or a pale blue-gray like #B7CADB, both of which appear in palettes on this page.

How do I keep a brown website from looking muddy?

Spread the browns across a wide lightness range instead of using several similar midtones, and keep at least one very light and one very dark tone. A small cool accent, and a slightly more saturated brown reserved for interactive elements, also help separate content from controls.