What are the hex codes in the Clay Oat & Mocha palette?

The Clay Oat & Mocha color palette consists of Taupe #503E2E, Mocha #997957, Oat #E6C69A, Snow #FFF9F0.

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

Use Snow #FFF9F0 as the background, Taupe #503E2E for text, Oat #E6C69A for buttons and links, and Mocha #997957 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Taupe on Snow at 9.69:1.

Which colors in Clay Oat & Mocha have enough contrast for text?

The highest-contrast pair is #503E2E on #FFF9F0 with a ratio of 9.69:1, which passes WCAG AA for normal text.

#503E2ETaupe

#997957Mocha

#E6C69AOat

#FFF9F0Snow

Clay Oat & Mocha color palette

Coffee Muted Warm Earthy Brown Beige White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Taupe	`#503E2E`	`rgb(80, 62, 46)`	`hsl(28, 27%, 25%)`	`oklch(37.9% 0.036 63)`
Mocha	`#997957`	`rgb(153, 121, 87)`	`hsl(31, 27%, 47%)`	`oklch(59.9% 0.062 68)`
Oat	`#E6C69A`	`rgb(230, 198, 154)`	`hsl(35, 60%, 75%)`	`oklch(84.3% 0.068 75)`
Snow	`#FFF9F0`	`rgb(255, 249, 240)`	`hsl(36, 100%, 97%)`	`oklch(98.4% 0.014 78)`

Why it works and how to use it

Clay Oat & Mocha is a monochromatic color palette tagged coffee, muted, warm. A monochromatic set: the same hue family from Taupe down to Snow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

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

Background: Snow (#FFF9F0) is the lightest color, so it belongs on large surfaces.
Text: Taupe (#503E2E) on #FFF9F0 gives 9.69:1, passing WCAG AAA.
Primary: Oat (#E6C69A) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Mocha (#997957) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Clay Oat & Mocha

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

#503E2E

#997957

#E6C69A

#FFF9F0

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
`#503E2E` on `#FFF9F0`	Aa	9.69:1	AAA
`#503E2E` on `#E6C69A`	Aa	6.24:1	AA
`#997957` on `#FFF9F0`	Aa	3.84:1	AA large only
`#503E2E` on `#997957`	Aa	2.53:1	Fail
`#997957` on `#E6C69A`	Aa	2.47:1	Fail
`#E6C69A` on `#FFF9F0`	Aa	1.55:1	Fail

Similar palettes 24 more in this mood