What are the hex codes in the Medium Skin palette?

The Medium Skin color palette consists of Latte #D9A57B, Hazelnut #C48B5E, Clay #A9724A, Cocoa #8A5A3A.

How should I use the Medium Skin palette on a website?

Use Latte #D9A57B as the background, Cocoa #8A5A3A for text, Hazelnut #C48B5E for buttons and links, and Clay #A9724A for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Medium Skin have enough contrast for text?

The highest-contrast pair is #D9A57B on #8A5A3A with a ratio of 2.67:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#D9A57BLatte

#C48B5EHazelnut

#A9724AClay

#8A5A3ACocoa

Medium Skin color palette

Skin Tone Muted Warm Earthy Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Latte	`#D9A57B`	`rgb(217, 165, 123)`	`hsl(27, 55%, 67%)`	`oklch(76.1% 0.083 60)`
Hazelnut	`#C48B5E`	`rgb(196, 139, 94)`	`hsl(26, 46%, 57%)`	`oklch(68.3% 0.092 59)`
Clay	`#A9724A`	`rgb(169, 114, 74)`	`hsl(25, 39%, 48%)`	`oklch(60.1% 0.089 56)`
Cocoa	`#8A5A3A`	`rgb(138, 90, 58)`	`hsl(24, 41%, 38%)`	`oklch(51.3% 0.078 54)`

Why it works and how to use it

Medium Skin is a monochromatic color palette tagged skin tone, muted, warm. A monochromatic set: the same hue family from Cocoa down to Latte. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

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

Background: Latte (#D9A57B) is the lightest color, so it belongs on large surfaces.
Text: Cocoa (#8A5A3A) on #D9A57B gives 2.67:1, so pair it with a darker neutral for body copy.
Primary: Hazelnut (#C48B5E) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Clay (#A9724A) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

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

#D9A57B

#C48B5E

#A9724A

#8A5A3A

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
`#D9A57B` on `#8A5A3A`	Aa	2.67:1	Fail
`#C48B5E` on `#8A5A3A`	Aa	2:1	Fail
`#D9A57B` on `#A9724A`	Aa	1.85:1	Fail
`#A9724A` on `#8A5A3A`	Aa	1.44:1	Fail
`#C48B5E` on `#A9724A`	Aa	1.39:1	Fail
`#D9A57B` on `#C48B5E`	Aa	1.34:1	Fail

Similar palettes 24 more in this mood