What are the hex codes in the Dust & Umber Whisper palette?

The Dust & Umber Whisper color palette consists of Almond #E5E1DA, Putty #CFC4B2, Dust #AF9E83, Umber #63533F.

How should I use the Dust & Umber Whisper palette on a website?

Use Almond #E5E1DA as the background, Umber #63533F for text, Putty #CFC4B2 for buttons and links, and Dust #AF9E83 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Almond on Umber at 5.67:1.

Which colors in Dust & Umber Whisper have enough contrast for text?

The highest-contrast pair is #E5E1DA on #63533F with a ratio of 5.67:1, which passes WCAG AA for normal text.

#E5E1DAAlmond

#CFC4B2Putty

#AF9E83Dust

#63533FUmber

Dust & Umber Whisper color palette

Muted Earthy Gray Beige Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Almond	`#E5E1DA`	`rgb(229, 225, 218)`	`hsl(38, 17%, 88%)`	`oklch(91.1% 0.010 82)`
Putty	`#CFC4B2`	`rgb(207, 196, 178)`	`hsl(37, 23%, 75%)`	`oklch(82.4% 0.028 80)`
Dust	`#AF9E83`	`rgb(175, 158, 131)`	`hsl(37, 22%, 60%)`	`oklch(70.7% 0.043 79)`
Umber	`#63533F`	`rgb(99, 83, 63)`	`hsl(33, 22%, 32%)`	`oklch(45.3% 0.037 73)`

Why it works and how to use it

Dust & Umber Whisper is a muted monochromatic color palette tagged muted, earthy, gray. A monochromatic set: the same hue family from Umber down to Almond. Saturation stays low across the board, giving it a calm, editorial feel. The overall temperature is warm.

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

Background: Almond (#E5E1DA) is the lightest color, so it belongs on large surfaces.
Text: Umber (#63533F) on #E5E1DA gives 5.67:1, passing WCAG AA.
Primary: Putty (#CFC4B2) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Dust (#AF9E83) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Dust & Umber Whisper

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

#E5E1DA

#CFC4B2

#AF9E83

#63533F

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
`#E5E1DA` on `#63533F`	Aa	5.67:1	AA
`#CFC4B2` on `#63533F`	Aa	4.29:1	AA large only
`#AF9E83` on `#63533F`	Aa	2.83:1	Fail
`#E5E1DA` on `#AF9E83`	Aa	2:1	Fail
`#CFC4B2` on `#AF9E83`	Aa	1.52:1	Fail
`#E5E1DA` on `#CFC4B2`	Aa	1.32:1	Fail

Similar palettes 24 more in this mood