What are the hex codes in the Cool Deep Skin palette?

The Cool Deep Skin color palette consists of Hazelnut #B98874, Cocoa #8B6556, Umber #664C43, Licorice #26170F.

How should I use the Cool Deep Skin palette on a website?

Use Hazelnut #B98874 as the background, Licorice #26170F for text, Cocoa #8B6556 for buttons and links, and Umber #664C43 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Hazelnut on Licorice at 5.64:1.

Which colors in Cool Deep Skin have enough contrast for text?

The highest-contrast pair is #B98874 on #26170F with a ratio of 5.64:1, which passes WCAG AA for normal text.

#B98874Hazelnut

#8B6556Cocoa

#664C43Umber

#26170FLicorice

Cool Deep Skin color palette

Skin Tone Dark Muted Warm Earthy Brown Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Hazelnut	`#B98874`	`rgb(185, 136, 116)`	`hsl(17, 33%, 59%)`	`oklch(66.9% 0.067 43)`
Cocoa	`#8B6556`	`rgb(139, 101, 86)`	`hsl(17, 24%, 44%)`	`oklch(54.2% 0.055 42)`
Umber	`#664C43`	`rgb(102, 76, 67)`	`hsl(15, 21%, 33%)`	`oklch(44.2% 0.038 40)`
Licorice	`#26170F`	`rgb(38, 23, 15)`	`hsl(21, 43%, 10%)`	`oklch(22.2% 0.029 49)`

Why it works and how to use it

Cool Deep Skin is a dark, monochromatic color palette tagged skin tone, dark, muted. All four colors sit within 6° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

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

Background: Hazelnut (#B98874) is the lightest color, so it belongs on large surfaces.
Text: Licorice (#26170F) on #B98874 gives 5.64:1, passing WCAG AA.
Primary: Cocoa (#8B6556) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Umber (#664C43) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Cool Deep Skin

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

#B98874

#8B6556

#664C43

#26170F

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
`#B98874` on `#26170F`	Aa	5.64:1	AA
`#8B6556` on `#26170F`	Aa	3.38:1	AA large only
`#B98874` on `#664C43`	Aa	2.55:1	Fail
`#664C43` on `#26170F`	Aa	2.21:1	Fail
`#B98874` on `#8B6556`	Aa	1.67:1	Fail
`#8B6556` on `#664C43`	Aa	1.53:1	Fail

Similar palettes 24 more in this mood