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

The Cocoa & Hazelnut Echo color palette consists of Hazelnut #AB8C6C, Khaki #C8B596, Cocoa #8E6A4E, Fog #D8D3CA.

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

Use Fog #D8D3CA as the background, Cocoa #8E6A4E for text, Khaki #C8B596 for buttons and links, and Hazelnut #AB8C6C for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

The highest-contrast pair is #8E6A4E on #D8D3CA with a ratio of 3.26:1, which passes WCAG AA for large text only.

#AB8C6CHazelnut

#C8B596Khaki

#8E6A4ECocoa

#D8D3CAFog

Cocoa & Hazelnut Echo color palette

Muted Warm Earthy Brown Beige Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Hazelnut	`#AB8C6C`	`rgb(171, 140, 108)`	`hsl(30, 27%, 55%)`	`oklch(66.1% 0.058 67)`
Khaki	`#C8B596`	`rgb(200, 181, 150)`	`hsl(37, 31%, 69%)`	`oklch(78.1% 0.047 80)`
Cocoa	`#8E6A4E`	`rgb(142, 106, 78)`	`hsl(26, 29%, 43%)`	`oklch(55.4% 0.062 59)`
Fog	`#D8D3CA`	`rgb(216, 211, 202)`	`hsl(39, 15%, 82%)`	`oklch(86.8% 0.013 82)`

Why it works and how to use it

Cocoa & Hazelnut Echo is a monochromatic color palette tagged muted, warm, earthy. A monochromatic set: the same hue family from Cocoa down to Fog. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

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

Background: Fog (#D8D3CA) is the lightest color, so it belongs on large surfaces.
Text: Cocoa (#8E6A4E) on #D8D3CA gives 3.26:1, enough for large headings only.
Primary: Khaki (#C8B596) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Hazelnut (#AB8C6C) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

Design faster with Cocoa & Hazelnut Echo

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#AB8C6C

#C8B596

#8E6A4E

#D8D3CA

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#8E6A4E` on `#D8D3CA`	Aa	3.26:1	AA large only
`#C8B596` on `#8E6A4E`	Aa	2.43:1	Fail
`#AB8C6C` on `#D8D3CA`	Aa	2.1:1	Fail
`#AB8C6C` on `#C8B596`	Aa	1.57:1	Fail
`#AB8C6C` on `#8E6A4E`	Aa	1.55:1	Fail
`#C8B596` on `#D8D3CA`	Aa	1.34:1	Fail

Similar palettes 24 more in this mood