What are the hex codes in the Clay Moss & Umber palette?

The Clay Moss & Umber color palette consists of Linen #FAF3EC, Oat #D2D3B2, Moss #A3933D, Umber #5B5530.

How should I use the Clay Moss & Umber palette on a website?

Use Linen #FAF3EC as the background, Umber #5B5530 for text, Moss #A3933D for buttons and links, and Oat #D2D3B2 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Linen on Umber at 6.85:1.

Which colors in Clay Moss & Umber have enough contrast for text?

The highest-contrast pair is #FAF3EC on #5B5530 with a ratio of 6.85:1, which passes WCAG AA for normal text.

#FAF3ECLinen

#D2D3B2Oat

#A3933DMoss

#5B5530Umber

Clay Moss & Umber color palette

Warm Minimal White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Linen	`#FAF3EC`	`rgb(250, 243, 236)`	`hsl(30, 58%, 95%)`	`oklch(96.8% 0.012 68)`
Oat	`#D2D3B2`	`rgb(210, 211, 178)`	`hsl(62, 27%, 76%)`	`oklch(85.7% 0.044 109)`
Moss	`#A3933D`	`rgb(163, 147, 61)`	`hsl(51, 46%, 44%)`	`oklch(66.0% 0.108 99)`
Umber	`#5B5530`	`rgb(91, 85, 48)`	`hsl(52, 31%, 27%)`	`oklch(44.6% 0.055 100)`

Why it works and how to use it

Clay Moss & Umber is a monochromatic color palette tagged warm, minimal, white. All four colors sit within 11° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

With 3 chromatic colors, Moss takes the lead while the rest support. Lightness runs from 27% to 95%. Well suited to websites, presentations and branding.

Background: Linen (#FAF3EC) is the lightest color, so it belongs on large surfaces.
Text: Umber (#5B5530) on #FAF3EC gives 6.85:1, passing WCAG AA.
Primary: Moss (#A3933D) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Oat (#D2D3B2) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Clay Moss & Umber

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

#FAF3EC

#D2D3B2

#A3933D

#5B5530

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
`#FAF3EC` on `#5B5530`	Aa	6.85:1	AA
`#D2D3B2` on `#5B5530`	Aa	4.92:1	AA
`#FAF3EC` on `#A3933D`	Aa	2.81:1	Fail
`#A3933D` on `#5B5530`	Aa	2.44:1	Fail
`#D2D3B2` on `#A3933D`	Aa	2.02:1	Fail
`#FAF3EC` on `#D2D3B2`	Aa	1.39:1	Fail

Similar palettes 24 more in this mood