Cappuccino
#704a3a
Muted cappuccino taupe with orange-brown depth
About Cappuccino
Cappuccino lands in that middle ground where brown stops feeling like a default and starts feeling like a choice, but it doesn't announce itself doing it. It's lighter and less saturated than both Bigfoot and Chocolate Magma, which means it reads warmer and softer without tipping into orange the way Cheeky Chestnut can on bright backgrounds. This is the brown that works when you need presence without weight.
Reach for it in food and beverage packaging, editorial headers, and dashboard accents where you want something that feels grounded but approachable. It pairs cleanly with warm neutrals and cream without disappearing, sits comfortably next to charcoal without looking washed out, and holds its own against busier backgrounds without demanding the room. It's the kind of color that works harder than it looks, functional enough for UI, warm enough for editorial, natural enough that it doesn't feel like you're trying too hard.
The thing: it's forgiving in smaller applications but can feel slightly flat in large, unbroken areas. Test it as an accent first. Pair it with something slightly cooler, a taupe, a sage, a soft gray, and it actually comes alive.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.