What are the hex codes in the Copper & Hazelnut Field palette?

The Copper & Hazelnut Field color palette consists of Cocoa #8A5B32, Copper #A97246, Hazelnut #C48B62, Latte #D9A482.

How should I use the Copper & Hazelnut Field palette on a website?

Use Latte #D9A482 as the background, Cocoa #8A5B32 for text, Hazelnut #C48B62 for buttons and links, and Copper #A97246 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Copper & Hazelnut Field have enough contrast for text?

The highest-contrast pair is #8A5B32 on #D9A482 with a ratio of 2.64:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#8A5B32Cocoa

#A97246Copper

#C48B62Hazelnut

#D9A482Latte

Copper & Hazelnut Field color palette

Muted Warm Earthy Brown Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cocoa	`#8A5B32`	`rgb(138, 91, 50)`	`hsl(28, 47%, 37%)`	`oklch(51.4% 0.084 60)`
Copper	`#A97246`	`rgb(169, 114, 70)`	`hsl(27, 41%, 47%)`	`oklch(60.0% 0.092 58)`
Hazelnut	`#C48B62`	`rgb(196, 139, 98)`	`hsl(25, 45%, 58%)`	`oklch(68.4% 0.089 56)`
Latte	`#D9A482`	`rgb(217, 164, 130)`	`hsl(23, 53%, 68%)`	`oklch(76.0% 0.078 54)`

Why it works and how to use it

Copper & Hazelnut Field 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, Hazelnut takes the lead while the rest support. Lightness runs from 37% to 68%. Well suited to wellness, organic and outdoor brands.

Background: Latte (#D9A482) is the lightest color, so it belongs on large surfaces.
Text: Cocoa (#8A5B32) on #D9A482 gives 2.64:1, so pair it with a darker neutral for body copy.
Primary: Hazelnut (#C48B62) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Copper (#A97246) 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 Copper & Hazelnut Field

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

#8A5B32

#A97246

#C48B62

#D9A482

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
`#8A5B32` on `#D9A482`	Aa	2.64:1	Fail
`#8A5B32` on `#C48B62`	Aa	1.99:1	Fail
`#A97246` on `#D9A482`	Aa	1.85:1	Fail
`#8A5B32` on `#A97246`	Aa	1.43:1	Fail
`#A97246` on `#C48B62`	Aa	1.39:1	Fail
`#C48B62` on `#D9A482`	Aa	1.33:1	Fail

Similar palettes 24 more in this mood