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

The Clay Cedar & Taupe color palette consists of Camel #C8977C, Cedar #825033, Taupe #582F16, Obsidian #0F0300.

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

Use Camel #C8977C as the background, Obsidian #0F0300 for text, Taupe #582F16 for buttons and links, and Cedar #825033 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Camel on Obsidian at 7.91:1.

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

The highest-contrast pair is #C8977C on #0F0300 with a ratio of 7.91:1, which passes WCAG AA for normal text.

#C8977CCamel

#825033Cedar

#582F16Taupe

#0F0300Obsidian

Clay Cedar & Taupe color palette

Dark Muted Warm Earthy Brown Black

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Camel	`#C8977C`	`rgb(200, 151, 124)`	`hsl(21, 41%, 64%)`	`oklch(71.6% 0.070 50)`
Cedar	`#825033`	`rgb(130, 80, 51)`	`hsl(22, 44%, 35%)`	`oklch(48.2% 0.080 50)`
Taupe	`#582F16`	`rgb(88, 47, 22)`	`hsl(23, 60%, 22%)`	`oklch(35.3% 0.070 50)`
Obsidian	`#0F0300`	`rgb(15, 3, 0)`	`hsl(12, 100%, 3%)`	`oklch(12.1% 0.032 50)`

Why it works and how to use it

Clay Cedar & Taupe is a dark, monochromatic color palette tagged dark, muted, warm. A monochromatic set: the same hue family from Obsidian down to Camel. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

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

Background: Camel (#C8977C) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#0F0300) on #C8977C gives 7.91:1, passing WCAG AAA.
Primary: Taupe (#582F16) is the most saturated mid-tone; use it for buttons and links (4.46:1 against the background, fine for UI elements).
Accent: Cedar (#825033) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Camel on Obsidian at 7.91:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Clay Cedar & 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

#C8977C

#825033

#582F16

#0F0300

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
`#C8977C` on `#0F0300`	Aa	7.91:1	AAA
`#C8977C` on `#582F16`	Aa	4.46:1	AA large only
`#825033` on `#0F0300`	Aa	3.04:1	AA large only
`#C8977C` on `#825033`	Aa	2.6:1	Fail
`#582F16` on `#0F0300`	Aa	1.77:1	Fail
`#825033` on `#582F16`	Aa	1.72:1	Fail

Similar palettes 24 more in this mood