Cocoa

#875f42

Deep cocoa brown with softer, cooler warmth

Save
Share

About Cocoa

Cocoa lands where brown stops trying to be warm and just is. It's lighter and less saturated than both and , 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 . 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
5.61:1AAAAA Large

On Gray 100 #f5f5f5

Aa
5.14:1AAAAA Large

On Gray 900 #18181b

Aa
3.16:1FailAA Large

On Black #000000

Aa
3.75:1FailAA Large

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Cocoa

Open the generator with this color pre-loaded.

Start creating