What are the hex codes in the Cocoa & Espresso Echo palette?

The Cocoa & Espresso Echo color palette consists of Espresso #522800, Cocoa #805B00, Sand #BAB682, Vanilla #D3EBB8.

How should I use the Cocoa & Espresso Echo palette on a website?

Use Vanilla #D3EBB8 as the background, Espresso #522800 for text, Cocoa #805B00 for buttons and links, and Sand #BAB682 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Vanilla at 9.83:1.

Which colors in Cocoa & Espresso Echo have enough contrast for text?

The highest-contrast pair is #522800 on #D3EBB8 with a ratio of 9.83:1, which passes WCAG AA for normal text.

#522800Espresso

#805B00Cocoa

#BAB682Sand

#D3EBB8Vanilla

Cocoa & Espresso Echo color palette

Skin Warm Earthy Brown Beige

Open in generator

Ask AI about this palette: ChatGPT Claude Perplexity

Cocoa & Espresso Echo is a vivid analogous color palette tagged skin, warm, earthy. The hues stay within 59° of each other on the color wheel, which is why the palette feels cohesive rather than busy. These are bold, punchy colors that need generous white space around them. The overall temperature is warm.

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Espresso	`#522800`	`rgb(82, 40, 0)`	`hsl(29, 100%, 16%)`	`oklch(32.7% 0.079 57)`
Cocoa	`#805B00`	`rgb(128, 91, 0)`	`hsl(43, 100%, 25%)`	`oklch(49.7% 0.103 81)`
Sand	`#BAB682`	`rgb(186, 182, 130)`	`hsl(56, 29%, 62%)`	`oklch(76.7% 0.070 104)`
Vanilla	`#D3EBB8`	`rgb(211, 235, 184)`	`hsl(88, 56%, 82%)`	`oklch(90.9% 0.072 128)`

Why it works and how to use it

With 4 chromatic colors, Cocoa takes the lead while the rest support. Lightness runs from 16% to 82%. Well suited to wellness, organic and outdoor brands.

Pair	Sample	Ratio	Level
`#522800` on `#D3EBB8`	Aa	9.83:1	AAA
`#522800` on `#BAB682`	Aa	6.08:1	AA
`#805B00` on `#D3EBB8`	Aa	4.79:1	AA
`#805B00` on `#BAB682`	Aa	2.96:1	Fail
`#522800` on `#805B00`	Aa	2.05:1	Fail
`#BAB682` on `#D3EBB8`	Aa	1.62:1	Fail

Cocoa & Espresso Echo color palette

Color codes click any value to copy

Why it works and how to use it

Preview on a real UI see how the palette feels in context

Design faster with Cocoa & Espresso Echo

Color blindness simulation

Contrast check WCAG ratios between palette colors

Similar palettes 24 more in this mood