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

The Mocha Taupe & Moss color palette consists of Taupe #543123, Walnut #594B2C, Moss #8F9F7D, Ash #A6CEC0.

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

Use Ash #A6CEC0 as the background, Taupe #543123 for text, Walnut #594B2C for buttons and links, and Moss #8F9F7D for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Taupe on Ash at 6.63:1.

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

The highest-contrast pair is #543123 on #A6CEC0 with a ratio of 6.63:1, which passes WCAG AA for normal text.

#543123Taupe

#594B2CWalnut

#8F9F7DMoss

#A6CEC0Ash

Mocha Taupe & Moss color palette

Coffee Muted Earthy Brown Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Taupe	`#543123`	`rgb(84, 49, 35)`	`hsl(17, 41%, 23%)`	`oklch(35.3% 0.056 42)`
Walnut	`#594B2C`	`rgb(89, 75, 44)`	`hsl(41, 34%, 26%)`	`oklch(41.9% 0.050 86)`
Moss	`#8F9F7D`	`rgb(143, 159, 125)`	`hsl(88, 15%, 56%)`	`oklch(68.1% 0.052 128)`
Ash	`#A6CEC0`	`rgb(166, 206, 192)`	`hsl(159, 29%, 73%)`	`oklch(81.9% 0.047 172)`

Why it works and how to use it

Mocha Taupe & Moss is a complementary color palette tagged coffee, muted, earthy. Near-complementary hues (about 142° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.

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

Background: Ash (#A6CEC0) is the lightest color, so it belongs on large surfaces.
Text: Taupe (#543123) on #A6CEC0 gives 6.63:1, passing WCAG AA.
Primary: Walnut (#594B2C) is the most saturated mid-tone; use it for buttons and links (4.95:1 against the background, fine for UI elements).
Accent: Moss (#8F9F7D) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Mocha Taupe & Moss

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

#543123

#594B2C

#8F9F7D

#A6CEC0

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
`#543123` on `#A6CEC0`	Aa	6.63:1	AA
`#594B2C` on `#A6CEC0`	Aa	4.95:1	AA
`#543123` on `#8F9F7D`	Aa	4.03:1	AA large only
`#594B2C` on `#8F9F7D`	Aa	3.01:1	AA large only
`#8F9F7D` on `#A6CEC0`	Aa	1.64:1	Fail
`#543123` on `#594B2C`	Aa	1.34:1	Fail

Similar palettes 24 more in this mood