What are the hex codes in the Copper & Sand Hour palette?

The Copper & Sand Hour color palette consists of Eggplant #5C4365, Cocoa #7F5558, Copper #A87533, Sand #BDC281.

How should I use the Copper & Sand Hour palette on a website?

Use Sand #BDC281 as the background, Eggplant #5C4365 for text, Copper #A87533 for buttons and links, and Cocoa #7F5558 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Eggplant on Sand at 4.58:1.

Which colors in Copper & Sand Hour have enough contrast for text?

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

#5C4365Eggplant

#7F5558Cocoa

#A87533Copper

#BDC281Sand

Copper & Sand Hour color palette

Modern Brown Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Eggplant	`#5C4365`	`rgb(92, 67, 101)`	`hsl(284, 20%, 33%)`	`oklch(42.4% 0.063 317)`
Cocoa	`#7F5558`	`rgb(127, 85, 88)`	`hsl(356, 20%, 42%)`	`oklch(49.6% 0.056 15)`
Copper	`#A87533`	`rgb(168, 117, 51)`	`hsl(34, 53%, 43%)`	`oklch(60.2% 0.104 70)`
Sand	`#BDC281`	`rgb(189, 194, 129)`	`hsl(65, 35%, 63%)`	`oklch(79.5% 0.086 112)`

Why it works and how to use it

Copper & Sand Hour is a complementary color palette tagged modern, brown, beige. Near-complementary hues (about 141° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

It works because the lightness steps are gentle (33% to 63%), which keeps the mood consistent from edge to edge. Try it for websites, presentations and branding.

Background: Sand (#BDC281) is the lightest color, so it belongs on large surfaces.
Text: Eggplant (#5C4365) on #BDC281 gives 4.58:1, passing WCAG AA.
Primary: Copper (#A87533) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cocoa (#7F5558) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Eggplant on Sand at 4.58:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Copper & Sand Hour

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

#5C4365

#7F5558

#A87533

#BDC281

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
`#5C4365` on `#BDC281`	Aa	4.58:1	AA
`#7F5558` on `#BDC281`	Aa	3.35:1	AA large only
`#5C4365` on `#A87533`	Aa	2.15:1	Fail
`#A87533` on `#BDC281`	Aa	2.13:1	Fail
`#7F5558` on `#A87533`	Aa	1.57:1	Fail
`#5C4365` on `#7F5558`	Aa	1.37:1	Fail

Similar palettes 24 more in this mood