What are the hex codes in the Clay & Copper Mood palette?

The Clay & Copper Mood color palette consists of Cocoa #845946, Copper #A57344, Clay #C0736B, Lilac #DC9AA5.

How should I use the Clay & Copper Mood palette on a website?

Use Lilac #DC9AA5 as the background, Cocoa #845946 for text, Copper #A57344 for buttons and links, and Clay #C0736B for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Clay & Copper Mood have enough contrast for text?

The highest-contrast pair is #845946 on #DC9AA5 with a ratio of 2.63:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#845946Cocoa

#A57344Copper

#C0736BClay

#DC9AA5Lilac

Clay & Copper Mood color palette

Earthy Muted Warm Brown Pink

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cocoa	`#845946`	`rgb(132, 89, 70)`	`hsl(18, 31%, 40%)`	`oklch(50.6% 0.064 45)`
Copper	`#A57344`	`rgb(165, 115, 68)`	`hsl(29, 42%, 46%)`	`oklch(59.7% 0.089 63)`
Clay	`#C0736B`	`rgb(192, 115, 107)`	`hsl(6, 40%, 59%)`	`oklch(63.7% 0.099 27)`
Lilac	`#DC9AA5`	`rgb(220, 154, 165)`	`hsl(350, 49%, 73%)`	`oklch(75.3% 0.080 8)`

Why it works and how to use it

Clay & Copper Mood is an analogous color palette tagged earthy, muted, warm. Analogous neighbors on the wheel (Cocoa, Copper, Clay) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

The palette holds together thanks to its analogous hue relationship and a soft light-to-dark ladder (73% down to 40% lightness). A natural fit for wellness, organic and outdoor brands.

Background: Lilac (#DC9AA5) is the lightest color, so it belongs on large surfaces.
Text: Cocoa (#845946) on #DC9AA5 gives 2.63:1, so pair it with a darker neutral for body copy.
Primary: Copper (#A57344) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Clay (#C0736B) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

Design faster with Clay & Copper Mood

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

#845946

#A57344

#C0736B

#DC9AA5

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
`#845946` on `#DC9AA5`	Aa	2.63:1	Fail
`#A57344` on `#DC9AA5`	Aa	1.79:1	Fail
`#845946` on `#C0736B`	Aa	1.69:1	Fail
`#C0736B` on `#DC9AA5`	Aa	1.56:1	Fail
`#845946` on `#A57344`	Aa	1.47:1	Fail
`#A57344` on `#C0736B`	Aa	1.15:1	Fail

Similar palettes 24 more in this mood