What are the hex codes in the Hazelnut & Coffee Field palette?

The Hazelnut & Coffee Field color palette consists of Licorice #271707, Coffee #684B29, Hazelnut #AB8D63, Putty #D3C9B9.

How should I use the Hazelnut & Coffee Field palette on a website?

Use Putty #D3C9B9 as the background, Licorice #271707 for text, Coffee #684B29 for buttons and links, and Hazelnut #AB8D63 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Licorice on Putty at 10.58:1.

Which colors in Hazelnut & Coffee Field have enough contrast for text?

The highest-contrast pair is #271707 on #D3C9B9 with a ratio of 10.58:1, which passes WCAG AA for normal text.

#271707Licorice

#684B29Coffee

#AB8D63Hazelnut

#D3C9B9Putty

Hazelnut & Coffee Field color palette

Dark Muted Warm Earthy Black Brown Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Licorice	`#271707`	`rgb(39, 23, 7)`	`hsl(30, 70%, 9%)`	`oklch(22.2% 0.037 64)`
Coffee	`#684B29`	`rgb(104, 75, 41)`	`hsl(32, 43%, 28%)`	`oklch(43.6% 0.063 69)`
Hazelnut	`#AB8D63`	`rgb(171, 141, 99)`	`hsl(35, 30%, 53%)`	`oklch(66.1% 0.068 75)`
Putty	`#D3C9B9`	`rgb(211, 201, 185)`	`hsl(37, 23%, 78%)`	`oklch(84.0% 0.025 80)`

Why it works and how to use it

Hazelnut & Coffee Field is a monochromatic color palette tagged dark, muted, warm. A monochromatic set: the same hue family from Licorice down to Putty. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

With 4 chromatic colors, Coffee takes the lead while the rest support. Lightness runs from 9% to 78%. Well suited to wellness, organic and outdoor brands.

Background: Putty (#D3C9B9) is the lightest color, so it belongs on large surfaces.
Text: Licorice (#271707) on #D3C9B9 gives 10.58:1, passing WCAG AAA.
Primary: Coffee (#684B29) is the most saturated mid-tone; use it for buttons and links (4.88:1 against the background, fine for UI elements).
Accent: Hazelnut (#AB8D63) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Licorice on Putty at 10.58:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Hazelnut & Coffee Field

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

#271707

#684B29

#AB8D63

#D3C9B9

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
`#271707` on `#D3C9B9`	Aa	10.58:1	AAA
`#271707` on `#AB8D63`	Aa	5.55:1	AA
`#684B29` on `#D3C9B9`	Aa	4.88:1	AA
`#684B29` on `#AB8D63`	Aa	2.56:1	Fail
`#271707` on `#684B29`	Aa	2.17:1	Fail
`#AB8D63` on `#D3C9B9`	Aa	1.91:1	Fail

Similar palettes 24 more in this mood