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

The Grounded Mocha & Taupe color palette consists of Almond #E7E3DE, Mushroom #C6B6A8, Mocha #93765F, Taupe #453021.

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

Use Almond #E7E3DE as the background, Taupe #453021 for text, Mushroom #C6B6A8 for buttons and links, and Mocha #93765F for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Almond on Taupe at 9.68:1.

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

The highest-contrast pair is #E7E3DE on #453021 with a ratio of 9.68:1, which passes WCAG AA for normal text.

#E7E3DEAlmond

#C6B6A8Mushroom

#93765FMocha

#453021Taupe

Grounded Mocha & Taupe color palette

Muted Minimal Earthy Gray Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Almond	`#E7E3DE`	`rgb(231, 227, 222)`	`hsl(33, 16%, 89%)`	`oklch(91.8% 0.008 74)`
Mushroom	`#C6B6A8`	`rgb(198, 182, 168)`	`hsl(28, 21%, 72%)`	`oklch(78.6% 0.027 64)`
Mocha	`#93765F`	`rgb(147, 118, 95)`	`hsl(27, 21%, 47%)`	`oklch(58.8% 0.050 60)`
Taupe	`#453021`	`rgb(69, 48, 33)`	`hsl(25, 35%, 20%)`	`oklch(33.0% 0.040 56)`

Why it works and how to use it

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

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

Background: Almond (#E7E3DE) is the lightest color, so it belongs on large surfaces.
Text: Taupe (#453021) on #E7E3DE gives 9.68:1, passing WCAG AAA.
Primary: Mushroom (#C6B6A8) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Mocha (#93765F) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Grounded Mocha & 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

#E7E3DE

#C6B6A8

#93765F

#453021

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
`#E7E3DE` on `#453021`	Aa	9.68:1	AAA
`#C6B6A8` on `#453021`	Aa	6.28:1	AA
`#E7E3DE` on `#93765F`	Aa	3.29:1	AA large only
`#93765F` on `#453021`	Aa	2.94:1	Fail
`#C6B6A8` on `#93765F`	Aa	2.13:1	Fail
`#E7E3DE` on `#C6B6A8`	Aa	1.54:1	Fail

Similar palettes 24 more in this mood