What are the hex codes in the Terra Cocoa & Hazelnut Mood palette?

The Terra Cocoa & Hazelnut Mood color palette consists of Coffee #6C4C27, Cocoa #906B3E, Hazelnut #AF8A63, Latte #C7A588.

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

Use Latte #C7A588 as the background, Coffee #6C4C27 for text, Cocoa #906B3E for buttons and links, and Hazelnut #AF8A63 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

The highest-contrast pair is #6C4C27 on #C7A588 with a ratio of 3.39:1, which passes WCAG AA for large text only.

#6C4C27Coffee

#906B3ECocoa

#AF8A63Hazelnut

#C7A588Latte

Terra Cocoa & Hazelnut Mood color palette

Muted Warm Earthy Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Coffee	`#6C4C27`	`rgb(108, 76, 39)`	`hsl(32, 47%, 29%)`	`oklch(44.3% 0.068 68)`
Cocoa	`#906B3E`	`rgb(144, 107, 62)`	`hsl(33, 40%, 40%)`	`oklch(55.5% 0.077 70)`
Hazelnut	`#AF8A63`	`rgb(175, 138, 99)`	`hsl(31, 32%, 54%)`	`oklch(65.9% 0.070 68)`
Latte	`#C7A588`	`rgb(199, 165, 136)`	`hsl(28, 36%, 66%)`	`oklch(74.5% 0.057 62)`

Why it works and how to use it

Terra Cocoa & Hazelnut Mood is a monochromatic color palette tagged muted, warm, earthy. All four colors sit within 5° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

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

Background: Latte (#C7A588) is the lightest color, so it belongs on large surfaces.
Text: Coffee (#6C4C27) on #C7A588 gives 3.39:1, enough for large headings only.
Primary: Cocoa (#906B3E) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Hazelnut (#AF8A63) 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 Terra Cocoa & Hazelnut Mood

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

#6C4C27

#906B3E

#AF8A63

#C7A588

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
`#6C4C27` on `#C7A588`	Aa	3.39:1	AA large only
`#6C4C27` on `#AF8A63`	Aa	2.46:1	Fail
`#906B3E` on `#C7A588`	Aa	2.1:1	Fail
`#6C4C27` on `#906B3E`	Aa	1.61:1	Fail
`#906B3E` on `#AF8A63`	Aa	1.52:1	Fail
`#AF8A63` on `#C7A588`	Aa	1.38:1	Fail

Similar palettes 24 more in this mood