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

The Hazelnut & Putty Field color palette consists of Bone #DBD7CF, Putty #CCBB9B, Hazelnut #B5954D, Raisin #251E12.

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

Use Bone #DBD7CF as the background, Raisin #251E12 for text, Hazelnut #B5954D for buttons and links, and Putty #CCBB9B for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Bone on Raisin at 11.49:1.

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

The highest-contrast pair is #DBD7CF on #251E12 with a ratio of 11.49:1, which passes WCAG AA for normal text.

#DBD7CFBone

#CCBB9BPutty

#B5954DHazelnut

#251E12Raisin

Hazelnut & Putty Field color palette

Muted Minimal Earthy Gray Beige Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Bone	`#DBD7CF`	`rgb(219, 215, 207)`	`hsl(40, 14%, 84%)`	`oklch(88.0% 0.012 85)`
Putty	`#CCBB9B`	`rgb(204, 187, 155)`	`hsl(39, 32%, 70%)`	`oklch(79.8% 0.047 83)`
Hazelnut	`#B5954D`	`rgb(181, 149, 77)`	`hsl(42, 41%, 51%)`	`oklch(68.4% 0.099 86)`
Raisin	`#251E12`	`rgb(37, 30, 18)`	`hsl(38, 35%, 11%)`	`oklch(23.9% 0.024 81)`

Why it works and how to use it

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

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

Background: Bone (#DBD7CF) is the lightest color, so it belongs on large surfaces.
Text: Raisin (#251E12) on #DBD7CF gives 11.49:1, passing WCAG AAA.
Primary: Hazelnut (#B5954D) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Putty (#CCBB9B) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Bone on Raisin at 11.49:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Hazelnut & Putty 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

#DBD7CF

#CCBB9B

#B5954D

#251E12

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
`#DBD7CF` on `#251E12`	Aa	11.49:1	AAA
`#CCBB9B` on `#251E12`	Aa	8.76:1	AAA
`#B5954D` on `#251E12`	Aa	5.79:1	AA
`#DBD7CF` on `#B5954D`	Aa	1.99:1	Fail
`#CCBB9B` on `#B5954D`	Aa	1.51:1	Fail
`#DBD7CF` on `#CCBB9B`	Aa	1.31:1	Fail

Similar palettes 24 more in this mood