What are the hex codes in the Washed Wheat & Cocoa palette?

The Washed Wheat & Cocoa color palette consists of Smoke #EAF7EF, Wheat #E8DCB6, Petal #FFDAE2, Cocoa #6C6243.

How should I use the Washed Wheat & Cocoa palette on a website?

Use Smoke #EAF7EF as the background, Cocoa #6C6243 for text, Petal #FFDAE2 for buttons and links, and Wheat #E8DCB6 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Cocoa at 5.5:1.

Which colors in Washed Wheat & Cocoa have enough contrast for text?

The highest-contrast pair is #EAF7EF on #6C6243 with a ratio of 5.5:1, which passes WCAG AA for normal text.

#EAF7EFSmoke

#E8DCB6Wheat

#FFDAE2Petal

#6C6243Cocoa

Washed Wheat & Cocoa color palette

Muted White Beige Brown

Open in generator

Ask AI about this palette: ChatGPT Claude Perplexity

Washed Wheat & Cocoa is a pastel light, complementary color palette tagged muted, white, beige. Smoke and Cocoa sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. The colors are light and airy, which suits friendly, soft-spoken brands. The overall temperature is warm.

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Smoke	`#EAF7EF`	`rgb(234, 247, 239)`	`hsl(143, 45%, 94%)`	`oklch(96.4% 0.017 159)`
Wheat	`#E8DCB6`	`rgb(232, 220, 182)`	`hsl(46, 52%, 81%)`	`oklch(89.4% 0.052 93)`
Petal	`#FFDAE2`	`rgb(255, 218, 226)`	`hsl(347, 100%, 93%)`	`oklch(92.2% 0.042 3)`
Cocoa	`#6C6243`	`rgb(108, 98, 67)`	`hsl(45, 23%, 34%)`	`oklch(49.7% 0.048 92)`

Why it works and how to use it

It works because the lightness range is wide (34% to 94%), which gives clear hierarchy between background, content and accents. Try it for social media templates and gentle interfaces.

Pair	Sample	Ratio	Level
`#EAF7EF` on `#6C6243`	Aa	5.5:1	AA
`#FFDAE2` on `#6C6243`	Aa	4.73:1	AA
`#E8DCB6` on `#6C6243`	Aa	4.43:1	AA large only
`#EAF7EF` on `#E8DCB6`	Aa	1.24:1	Fail
`#EAF7EF` on `#FFDAE2`	Aa	1.16:1	Fail
`#E8DCB6` on `#FFDAE2`	Aa	1.07:1	Fail

Washed Wheat & Cocoa color palette

Color codes click any value to copy

Why it works and how to use it

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

Design faster with Washed Wheat & Cocoa

Color blindness simulation

Contrast check WCAG ratios between palette colors

Similar palettes 24 more in this mood