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

The Rich Deep Skin color palette consists of Latte #CEA081, Cocoa #926749, Coffee #6C4932, Licorice #25170D.

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

Use Latte #CEA081 as the background, Licorice #25170D for text, Coffee #6C4932 for buttons and links, and Cocoa #926749 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Latte on Licorice at 7.43:1.

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

The highest-contrast pair is #CEA081 on #25170D with a ratio of 7.43:1, which passes WCAG AA for normal text.

#CEA081Latte

#926749Cocoa

#6C4932Coffee

#25170DLicorice

Rich Deep Skin color palette

Skin Tone Dark Muted Warm Earthy Brown Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Latte	`#CEA081`	`rgb(206, 160, 129)`	`hsl(24, 44%, 66%)`	`oklch(74.1% 0.070 55)`
Cocoa	`#926749`	`rgb(146, 103, 73)`	`hsl(25, 33%, 43%)`	`oklch(55.1% 0.070 56)`
Coffee	`#6C4932`	`rgb(108, 73, 50)`	`hsl(24, 37%, 31%)`	`oklch(43.9% 0.059 54)`
Licorice	`#25170D`	`rgb(37, 23, 13)`	`hsl(25, 48%, 10%)`	`oklch(22.0% 0.029 56)`

Why it works and how to use it

Rich Deep Skin is a dark, monochromatic color palette tagged skin tone, dark, muted. A monochromatic set: the same hue family from Licorice down to Latte. 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 10% to 66%. Well suited to wellness, organic and outdoor brands.

Background: Latte (#CEA081) is the lightest color, so it belongs on large surfaces.
Text: Licorice (#25170D) on #CEA081 gives 7.43:1, passing WCAG AAA.
Primary: Coffee (#6C4932) is the most saturated mid-tone; use it for buttons and links (3.4:1 against the background, fine for UI elements).
Accent: Cocoa (#926749) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Rich 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

#CEA081

#926749

#6C4932

#25170D

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
`#CEA081` on `#25170D`	Aa	7.43:1	AAA
`#926749` on `#25170D`	Aa	3.53:1	AA large only
`#CEA081` on `#6C4932`	Aa	3.4:1	AA large only
`#6C4932` on `#25170D`	Aa	2.18:1	Fail
`#CEA081` on `#926749`	Aa	2.11:1	Fail
`#926749` on `#6C4932`	Aa	1.62:1	Fail

Similar palettes 24 more in this mood