Coffee Color Palette

Espresso, roast brown, latte crema and steamed-milk cream — a café brand in four pours. Anchors: #3E2723, #6F4E37, #C8A27A, #F3E9DC.

coffeebrowncafe
#3E2723
#6F4E37
#C8A27A
#F3E9DC
#A49694
#3e2723 #6f4e37 #c8a27a #f3e9dc #a49694
#3E2723 #6F4E37 #C8A27A #F3E9DC #A49694

Semantic roles

Assigned deterministically: lightest = background, darkest = text, most saturated = primary.

background#F3E9DC
surface#C8A27A
text#3E2723
text-muted#6F4E37
primary#6F4E37
secondary#C8A27A
accent#A49694

CSS variables 

:root {
  --background: #f3e9dc;
  --surface: #c8a27a;
  --text: #3e2723;
  --text-muted: #6f4e37;
  --primary: #6f4e37;
  --secondary: #c8a27a;
  --accent: #a49694;
}
Preview in UIs →

Accessibility matrix

Text color (rows) on background (columns). Green = WCAG AA pass for normal text (≥4.5:1).

Text \ BG#3E2723#6F4E37#C8A27A#F3E9DC#A49694
#3E2723
1.0
1.9
5.9
11.5
4.8
#6F4E37
1.9
1.0
3.2
6.2
2.6
#C8A27A
5.9
3.2
1.0
2.0
1.2
#F3E9DC
11.5
6.2
2.0
1.0
2.4
#A49694
4.8
2.6
1.2
2.4
1.0

Under deuteranopia

Machado et al. (2009) simulation, severity 1.0 — approximation, not a medical tool.

Colors in this palette

#3E2723
rgb(62, 39, 35)
#6F4E37
rgb(111, 78, 55)
#C8A27A
rgb(200, 162, 122)
#F3E9DC
rgb(243, 233, 220)
#A49694
rgb(164, 150, 148)

Similar palettes

Camel Color Palette
Burlywood Color Palette
Tan Color Palette

FAQ

How do I use the coffee color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #3E2723, #6F4E37, #C8A27A, #F3E9DC, #A49694.

Do these colors pass accessibility checks?

See the WCAG matrix on this page: every text-on-background pairing with ratio ≥ 4.5 passes AA for normal text; ≥ 3 passes AA for large text and UI components.