What are the hex codes in the Earthy Hazelnut & Apricot palette?

The Earthy Hazelnut & Apricot color palette consists of Apricot #FECBA1, Hazelnut #BF885B, Cocoa #92643F, Taupe #453121.

How should I use the Earthy Hazelnut & Apricot palette on a website?

Use Apricot #FECBA1 as the background, Taupe #453121 for text, Hazelnut #BF885B for buttons and links, and Cocoa #92643F for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Apricot on Taupe at 8.32:1.

Which colors in Earthy Hazelnut & Apricot have enough contrast for text?

The highest-contrast pair is #FECBA1 on #453121 with a ratio of 8.32:1, which passes WCAG AA for normal text.

#FECBA1Apricot

#BF885BHazelnut

#92643FCocoa

#453121Taupe

Earthy Hazelnut & Apricot color palette

Skin Tone Muted Warm Earthy Beige Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Apricot	`#FECBA1`	`rgb(254, 203, 161)`	`hsl(27, 98%, 81%)`	`oklch(87.7% 0.080 61)`
Hazelnut	`#BF885B`	`rgb(191, 136, 91)`	`hsl(27, 44%, 55%)`	`oklch(67.1% 0.091 60)`
Cocoa	`#92643F`	`rgb(146, 100, 63)`	`hsl(27, 40%, 41%)`	`oklch(54.3% 0.079 59)`
Taupe	`#453121`	`rgb(69, 49, 33)`	`hsl(27, 35%, 20%)`	`oklch(33.2% 0.039 60)`

Why it works and how to use it

Earthy Hazelnut & Apricot is a monochromatic color palette tagged skin tone, muted, warm. All four colors sit within 0° 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 20% to 81%. Well suited to wellness, organic and outdoor brands.

Background: Apricot (#FECBA1) is the lightest color, so it belongs on large surfaces.
Text: Taupe (#453121) on #FECBA1 gives 8.32:1, passing WCAG AAA.
Primary: Hazelnut (#BF885B) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cocoa (#92643F) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Apricot on Taupe at 8.32:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Earthy Hazelnut & Apricot

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

#FECBA1

#BF885B

#92643F

#453121

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
`#FECBA1` on `#453121`	Aa	8.32:1	AAA
`#BF885B` on `#453121`	Aa	4.02:1	AA large only
`#FECBA1` on `#92643F`	Aa	3.47:1	AA large only
`#92643F` on `#453121`	Aa	2.4:1	Fail
`#FECBA1` on `#BF885B`	Aa	2.07:1	Fail
`#BF885B` on `#92643F`	Aa	1.67:1	Fail

Similar palettes 24 more in this mood