What are the hex codes in the Shadow & Coffee Tale palette?

The Shadow & Coffee Tale color palette consists of Sand #C8AE76, Shadow #917233, Coffee #6E541C, Raisin #281D06.

How should I use the Shadow & Coffee Tale palette on a website?

Use Sand #C8AE76 as the background, Raisin #281D06 for text, Coffee #6E541C for buttons and links, and Shadow #917233 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Sand on Raisin at 7.7:1.

Which colors in Shadow & Coffee Tale have enough contrast for text?

The highest-contrast pair is #C8AE76 on #281D06 with a ratio of 7.7:1, which passes WCAG AA for normal text.

#C8AE76Sand

#917233Shadow

#6E541CCoffee

#281D06Raisin

Shadow & Coffee Tale color palette

Dark Muted Warm Earthy Beige Brown Black

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Sand	`#C8AE76`	`rgb(200, 174, 118)`	`hsl(41, 43%, 62%)`	`oklch(76.0% 0.079 86)`
Shadow	`#917233`	`rgb(145, 114, 51)`	`hsl(40, 48%, 38%)`	`oklch(56.9% 0.090 83)`
Coffee	`#6E541C`	`rgb(110, 84, 28)`	`hsl(41, 59%, 27%)`	`oklch(46.2% 0.080 83)`
Raisin	`#281D06`	`rgb(40, 29, 6)`	`hsl(41, 74%, 9%)`	`oklch(23.9% 0.040 83)`

Why it works and how to use it

Shadow & Coffee Tale is a dark, monochromatic color palette tagged dark, muted, warm. All four colors sit within 1° 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 4 chromatic colors, Coffee takes the lead while the rest support. Lightness runs from 9% to 62%. Well suited to wellness, organic and outdoor brands.

Background: Sand (#C8AE76) is the lightest color, so it belongs on large surfaces.
Text: Raisin (#281D06) on #C8AE76 gives 7.7:1, passing WCAG AAA.
Primary: Coffee (#6E541C) is the most saturated mid-tone; use it for buttons and links (3.31:1 against the background, fine for UI elements).
Accent: Shadow (#917233) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Shadow & Coffee Tale

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

#C8AE76

#917233

#6E541C

#281D06

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
`#C8AE76` on `#281D06`	Aa	7.7:1	AAA
`#917233` on `#281D06`	Aa	3.67:1	AA large only
`#C8AE76` on `#6E541C`	Aa	3.31:1	AA large only
`#6E541C` on `#281D06`	Aa	2.32:1	Fail
`#C8AE76` on `#917233`	Aa	2.1:1	Fail
`#917233` on `#6E541C`	Aa	1.58:1	Fail

Similar palettes 24 more in this mood