What are the hex codes in the Terra Mocha & Cocoa palette?

The Terra Mocha & Cocoa color palette consists of Dust #BFA18C, Mocha #A3826D, Cocoa #816452, Umber #61493B.

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

Use Dust #BFA18C as the background, Umber #61493B for text, Mocha #A3826D for buttons and links, and Cocoa #816452 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

The highest-contrast pair is #BFA18C on #61493B with a ratio of 3.44:1, which passes WCAG AA for large text only.

#BFA18CDust

#A3826DMocha

#816452Cocoa

#61493BUmber

Terra Mocha & Cocoa color palette

Skin Tone Muted Earthy Beige Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Dust	`#BFA18C`	`rgb(191, 161, 140)`	`hsl(25, 28%, 65%)`	`oklch(73.0% 0.046 57)`
Mocha	`#A3826D`	`rgb(163, 130, 109)`	`hsl(23, 23%, 53%)`	`oklch(63.2% 0.051 54)`
Cocoa	`#816452`	`rgb(129, 100, 82)`	`hsl(23, 22%, 41%)`	`oklch(52.7% 0.046 53)`
Umber	`#61493B`	`rgb(97, 73, 59)`	`hsl(22, 24%, 31%)`	`oklch(42.7% 0.040 52)`

Why it works and how to use it

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

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

Background: Dust (#BFA18C) is the lightest color, so it belongs on large surfaces.
Text: Umber (#61493B) on #BFA18C gives 3.44:1, enough for large headings only.
Primary: Mocha (#A3826D) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cocoa (#816452) 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 Mocha & 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

#BFA18C

#A3826D

#816452

#61493B

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
`#BFA18C` on `#61493B`	Aa	3.44:1	AA large only
`#A3826D` on `#61493B`	Aa	2.37:1	Fail
`#BFA18C` on `#816452`	Aa	2.24:1	Fail
`#A3826D` on `#816452`	Aa	1.54:1	Fail
`#816452` on `#61493B`	Aa	1.54:1	Fail
`#BFA18C` on `#A3826D`	Aa	1.46:1	Fail

Similar palettes 24 more in this mood