What are the hex codes in the Cherry Cocoa & Taupe palette?

The Cherry Cocoa & Taupe color palette consists of Smoke #F9F6F5, Fog #E2CDCC, Cocoa #976064, Taupe #4F2F32.

How should I use the Cherry Cocoa & Taupe palette on a website?

Use Smoke #F9F6F5 as the background, Taupe #4F2F32 for text, Fog #E2CDCC for buttons and links, and Cocoa #976064 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Taupe at 10.94:1.

Which colors in Cherry Cocoa & Taupe have enough contrast for text?

The highest-contrast pair is #F9F6F5 on #4F2F32 with a ratio of 10.94:1, which passes WCAG AA for normal text.

#F9F6F5Smoke

#E2CDCCFog

#976064Cocoa

#4F2F32Taupe

Cherry Cocoa & Taupe color palette

Muted Minimal White Gray Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Smoke	`#F9F6F5`	`rgb(249, 246, 245)`	`hsl(15, 25%, 97%)`	`oklch(97.5% 0.003 39)`
Fog	`#E2CDCC`	`rgb(226, 205, 204)`	`hsl(3, 27%, 84%)`	`oklch(86.5% 0.024 21)`
Cocoa	`#976064`	`rgb(151, 96, 100)`	`hsl(356, 22%, 48%)`	`oklch(55.0% 0.072 15)`
Taupe	`#4F2F32`	`rgb(79, 47, 50)`	`hsl(354, 25%, 25%)`	`oklch(34.6% 0.047 14)`

Why it works and how to use it

Cherry Cocoa & Taupe is a monochromatic color palette tagged muted, minimal, white. A monochromatic set: the same hue family from Taupe down to Smoke. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

The palette holds together thanks to its monochromatic hue relationship and a strong light-to-dark ladder (97% down to 25% lightness). A natural fit for websites, presentations and branding.

Background: Smoke (#F9F6F5) is the lightest color, so it belongs on large surfaces.
Text: Taupe (#4F2F32) on #F9F6F5 gives 10.94:1, passing WCAG AAA.
Primary: Fog (#E2CDCC) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cocoa (#976064) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Cherry Cocoa & Taupe

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

#F9F6F5

#E2CDCC

#976064

#4F2F32

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
`#F9F6F5` on `#4F2F32`	Aa	10.94:1	AAA
`#E2CDCC` on `#4F2F32`	Aa	7.75:1	AAA
`#F9F6F5` on `#976064`	Aa	4.68:1	AA
`#E2CDCC` on `#976064`	Aa	3.32:1	AA large only
`#976064` on `#4F2F32`	Aa	2.34:1	Fail
`#F9F6F5` on `#E2CDCC`	Aa	1.41:1	Fail

Similar palettes 24 more in this mood