What are the hex codes in the Coffee & Cocoa Haze palette?

The Coffee & Cocoa Haze color palette consists of Coffee #6B4936, Cocoa #6D6541, Stone #869884, Powder Blue #ADD7D2.

How should I use the Coffee & Cocoa Haze palette on a website?

Use Powder Blue #ADD7D2 as the background, Coffee #6B4936 for text, Cocoa #6D6541 for buttons and links, and Stone #869884 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Coffee on Powder Blue at 5.1:1.

Which colors in Coffee & Cocoa Haze have enough contrast for text?

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

#6B4936Coffee

#6D6541Cocoa

#869884Stone

#ADD7D2Powder Blue

Coffee & Cocoa Haze color palette

Muted Warm Earthy Brown Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Coffee	`#6B4936`	`rgb(107, 73, 54)`	`hsl(22, 33%, 32%)`	`oklch(43.8% 0.055 50)`
Cocoa	`#6D6541`	`rgb(109, 101, 65)`	`hsl(49, 25%, 34%)`	`oklch(50.5% 0.053 97)`
Stone	`#869884`	`rgb(134, 152, 132)`	`hsl(114, 9%, 56%)`	`oklch(66.0% 0.036 142)`
Powder Blue	`#ADD7D2`	`rgb(173, 215, 210)`	`hsl(173, 34%, 76%)`	`oklch(84.8% 0.045 187)`

Why it works and how to use it

Coffee & Cocoa Haze is a complementary color palette tagged muted, warm, earthy. Near-complementary hues (about 151° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Cocoa takes the lead while the rest support. Lightness runs from 32% to 76%. Well suited to wellness, organic and outdoor brands.

Background: Powder Blue (#ADD7D2) is the lightest color, so it belongs on large surfaces.
Text: Coffee (#6B4936) on #ADD7D2 gives 5.1:1, passing WCAG AA.
Primary: Cocoa (#6D6541) is the most saturated mid-tone; use it for buttons and links (3.74:1 against the background, fine for UI elements).
Accent: Stone (#869884) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Coffee on Powder Blue at 5.1:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Coffee & Cocoa Haze

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

#6B4936

#6D6541

#869884

#ADD7D2

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
`#6B4936` on `#ADD7D2`	Aa	5.1:1	AA
`#6D6541` on `#ADD7D2`	Aa	3.74:1	AA large only
`#6B4936` on `#869884`	Aa	2.6:1	Fail
`#869884` on `#ADD7D2`	Aa	1.96:1	Fail
`#6D6541` on `#869884`	Aa	1.91:1	Fail
`#6B4936` on `#6D6541`	Aa	1.36:1	Fail

Similar palettes 24 more in this mood