What are the hex codes in the Clay Latte & Clay palette?

The Clay Latte & Clay color palette consists of Linen #FFF2E7, Latte #DAA175, Clay #9F6B49, Taupe #513628.

How should I use the Clay Latte & Clay palette on a website?

Use Linen #FFF2E7 as the background, Taupe #513628 for text, Latte #DAA175 for buttons and links, and Clay #9F6B49 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Linen on Taupe at 10.01:1.

Which colors in Clay Latte & Clay have enough contrast for text?

The highest-contrast pair is #FFF2E7 on #513628 with a ratio of 10.01:1, which passes WCAG AA for normal text.

#FFF2E7Linen

#DAA175Latte

#9F6B49Clay

#513628Taupe

Clay Latte & Clay color palette

Skin Tone Muted Warm Earthy White Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Linen	`#FFF2E7`	`rgb(255, 242, 231)`	`hsl(27, 100%, 95%)`	`oklch(96.8% 0.020 63)`
Latte	`#DAA175`	`rgb(218, 161, 117)`	`hsl(26, 58%, 66%)`	`oklch(75.3% 0.090 59)`
Clay	`#9F6B49`	`rgb(159, 107, 73)`	`hsl(24, 37%, 45%)`	`oklch(57.5% 0.082 54)`
Taupe	`#513628`	`rgb(81, 54, 40)`	`hsl(20, 34%, 24%)`	`oklch(36.1% 0.045 48)`

Why it works and how to use it

Clay Latte & Clay is a monochromatic color palette tagged skin tone, muted, warm. 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.

The palette holds together thanks to its monochromatic hue relationship and a strong light-to-dark ladder (95% down to 24% lightness). A natural fit for wellness, organic and outdoor brands.

Background: Linen (#FFF2E7) is the lightest color, so it belongs on large surfaces.
Text: Taupe (#513628) on #FFF2E7 gives 10.01:1, passing WCAG AAA.
Primary: Latte (#DAA175) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Clay (#9F6B49) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Linen on Taupe at 10.01:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Clay Latte & Clay

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

#FFF2E7

#DAA175

#9F6B49

#513628

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
`#FFF2E7` on `#513628`	Aa	10.01:1	AAA
`#DAA175` on `#513628`	Aa	4.89:1	AA
`#FFF2E7` on `#9F6B49`	Aa	4.09:1	AA large only
`#9F6B49` on `#513628`	Aa	2.45:1	Fail
`#FFF2E7` on `#DAA175`	Aa	2.05:1	Fail
`#DAA175` on `#9F6B49`	Aa	2:1	Fail

Similar palettes 24 more in this mood