Cocoa
#875f42
Deep cocoa brown with softer, cooler warmth
About Cocoa
Cocoa lands where brown stops trying to be warm and just is. It's lighter and less saturated than both Barrel Aged and Chivalrous Walrus, which means it won't compete for attention the way those heavier siblings do. There's no red bite hiding underneath, no leather story, just a straightforward brown that reads as composed instead of confident.
Use it as a button state, a card background, or a section divider in editorial layouts, product sites, and food interfaces where you need color that recedes slightly but doesn't vanish. It works in heritage branding when you want warmth without the aggressive presence of Coconut. Against cream or warm whites it settles without drama. The real advantage: it's approachable enough to use at scale without exhausting the eye the way denser browns do.
Pair it with warm neutrals and off-whites and it stays clear. Cool grays will flatten it like they do the rest of the family, so don't fight that. This is the brown you reach for when you need presence that earns its place through restraint, not saturation.
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.