Mocha Madness
#8b6b58
Mocha-toned warm brown for deeper, richer accents
About Mocha Madness
Mocha Madness reads like cocoa grounds pressed into leather that's been handled, not polished. Compared to Leather, it's less dry and less "worked" feeling, with a smoother, creamier brown that holds its color. And next to Caribou, it loses some of that lighter, leather-like clarity and steps deeper, with a softer edge that feels more blended than chosen.
It's the brown I reach for when you want warmth without that red-leaning commitment of Chivalrous Walrus. In UI, it works as card backgrounds, dense table panels, and secondary button states where you need depth but not the heavy drama of deeper earth tones. On product and packaging mockups, it holds up for coffee brands, craft beverage labels, and automotive trim photography where the scene already has midtones that need a steady anchor.
Pair it with oat creams, warm grays, or brushed brass. Push it next to very cool neutrals and it can start to look dull and slightly gray-brown.
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.