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

The Mocha Clay & Taupe color palette consists of Taupe #4F3A00, Coffee #6C4F3C, Clay #BC807D, Lilac #DCA4BD.

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

Use Lilac #DCA4BD as the background, Taupe #4F3A00 for text, Clay #BC807D for buttons and links, and Coffee #6C4F3C for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Taupe on Lilac at 5.21:1.

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

The highest-contrast pair is #4F3A00 on #DCA4BD with a ratio of 5.21:1, which passes WCAG AA for normal text.

#4F3A00Taupe

#6C4F3CCoffee

#BC807DClay

#DCA4BDLilac

Mocha Clay & Taupe color palette

Muted Warm Earthy Pink

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Taupe	`#4F3A00`	`rgb(79, 58, 0)`	`hsl(44, 100%, 15%)`	`oklch(36.2% 0.074 86)`
Coffee	`#6C4F3C`	`rgb(108, 79, 60)`	`hsl(24, 29%, 33%)`	`oklch(45.3% 0.049 54)`
Clay	`#BC807D`	`rgb(188, 128, 125)`	`hsl(3, 32%, 61%)`	`oklch(66.0% 0.075 22)`
Lilac	`#DCA4BD`	`rgb(220, 164, 189)`	`hsl(333, 44%, 75%)`	`oklch(77.8% 0.073 350)`

Why it works and how to use it

Mocha Clay & Taupe is a split color palette tagged muted, warm, earthy. The hues span about 71°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

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

Background: Lilac (#DCA4BD) is the lightest color, so it belongs on large surfaces.
Text: Taupe (#4F3A00) on #DCA4BD gives 5.21:1, passing WCAG AA.
Primary: Clay (#BC807D) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Coffee (#6C4F3C) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Mocha Clay & Taupe

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

#4F3A00

#6C4F3C

#BC807D

#DCA4BD

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
`#4F3A00` on `#DCA4BD`	Aa	5.21:1	AA
`#6C4F3C` on `#DCA4BD`	Aa	3.58:1	AA large only
`#4F3A00` on `#BC807D`	Aa	3.37:1	AA large only
`#6C4F3C` on `#BC807D`	Aa	2.31:1	Fail
`#BC807D` on `#DCA4BD`	Aa	1.55:1	Fail
`#4F3A00` on `#6C4F3C`	Aa	1.46:1	Fail

Similar palettes 24 more in this mood