What are the hex codes in the Harvest Apricot & Mocha palette?

The Harvest Apricot & Mocha color palette consists of Umber #77545E, Mocha #B47E81, Apricot #FBCCA8, Linen #F6EDE1.

How should I use the Harvest Apricot & Mocha palette on a website?

Use Linen #F6EDE1 as the background, Umber #77545E for text, Apricot #FBCCA8 for buttons and links, and Mocha #B47E81 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Umber on Linen at 5.64:1.

Which colors in Harvest Apricot & Mocha have enough contrast for text?

The highest-contrast pair is #77545E on #F6EDE1 with a ratio of 5.64:1, which passes WCAG AA for normal text.

#77545EUmber

#B47E81Mocha

#FBCCA8Apricot

#F6EDE1Linen

Harvest Apricot & Mocha color palette

Autumn Muted Warm Brown Beige White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Umber	`#77545E`	`rgb(119, 84, 94)`	`hsl(343, 17%, 40%)`	`oklch(48.6% 0.049 0)`
Mocha	`#B47E81`	`rgb(180, 126, 129)`	`hsl(357, 26%, 60%)`	`oklch(64.8% 0.067 15)`
Apricot	`#FBCCA8`	`rgb(251, 204, 168)`	`hsl(26, 91%, 82%)`	`oklch(87.7% 0.072 59)`
Linen	`#F6EDE1`	`rgb(246, 237, 225)`	`hsl(34, 54%, 92%)`	`oklch(95.0% 0.019 75)`

Why it works and how to use it

Harvest Apricot & Mocha is an analogous color palette tagged autumn, muted, warm. Analogous neighbors on the wheel (Mocha, Apricot, Linen) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

It works because the lightness range is wide (40% to 92%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.

Background: Linen (#F6EDE1) is the lightest color, so it belongs on large surfaces.
Text: Umber (#77545E) on #F6EDE1 gives 5.64:1, passing WCAG AA.
Primary: Apricot (#FBCCA8) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Mocha (#B47E81) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Umber on Linen at 5.64:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Harvest Apricot & Mocha

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

#77545E

#B47E81

#FBCCA8

#F6EDE1

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
`#77545E` on `#F6EDE1`	Aa	5.64:1	AA
`#77545E` on `#FBCCA8`	Aa	4.45:1	AA large only
`#B47E81` on `#F6EDE1`	Aa	2.9:1	Fail
`#B47E81` on `#FBCCA8`	Aa	2.29:1	Fail
`#77545E` on `#B47E81`	Aa	1.94:1	Fail
`#FBCCA8` on `#F6EDE1`	Aa	1.27:1	Fail

Similar palettes 24 more in this mood