What are the hex codes in the Desert Copper & Cocoa palette?

The Desert Copper & Cocoa color palette consists of Latte #C7A06B, Copper #AB8146, Cocoa #8A622E, Sepia #68481E.

How should I use the Desert Copper & Cocoa palette on a website?

Use Latte #C7A06B as the background, Sepia #68481E for text, Cocoa #8A622E for buttons and links, and Copper #AB8146 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Desert Copper & Cocoa have enough contrast for text?

The highest-contrast pair is #C7A06B on #68481E with a ratio of 3.42:1, which passes WCAG AA for large text only.

#C7A06BLatte

#AB8146Copper

#8A622ECocoa

#68481ESepia

Desert Copper & Cocoa color palette

Skin Tone Muted Warm Earthy Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Latte	`#C7A06B`	`rgb(199, 160, 107)`	`hsl(35, 45%, 60%)`	`oklch(72.9% 0.084 74)`
Copper	`#AB8146`	`rgb(171, 129, 70)`	`hsl(35, 42%, 47%)`	`oklch(63.2% 0.092 74)`
Cocoa	`#8A622E`	`rgb(138, 98, 46)`	`hsl(34, 50%, 36%)`	`oklch(52.7% 0.086 71)`
Sepia	`#68481E`	`rgb(104, 72, 30)`	`hsl(34, 55%, 26%)`	`oklch(42.8% 0.072 71)`

Why it works and how to use it

Desert Copper & Cocoa is a monochromatic color palette tagged skin tone, muted, warm. A monochromatic set: the same hue family from Sepia down to Latte. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

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

Background: Latte (#C7A06B) is the lightest color, so it belongs on large surfaces.
Text: Sepia (#68481E) on #C7A06B gives 3.42:1, enough for large headings only.
Primary: Cocoa (#8A622E) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Copper (#AB8146) 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 Desert Copper & Cocoa

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

#C7A06B

#AB8146

#8A622E

#68481E

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
`#C7A06B` on `#68481E`	Aa	3.42:1	AA large only
`#AB8146` on `#68481E`	Aa	2.35:1	Fail
`#C7A06B` on `#8A622E`	Aa	2.24:1	Fail
`#AB8146` on `#8A622E`	Aa	1.54:1	Fail
`#8A622E` on `#68481E`	Aa	1.53:1	Fail
`#C7A06B` on `#AB8146`	Aa	1.45:1	Fail

Similar palettes 24 more in this mood