What are the hex codes in the Cheerful Caramel & Sand palette?

The Cheerful Caramel & Sand color palette consists of Caramel #B48500, Sand #D0AF57, Coffee #74552F, Bone #E0D9CA.

How should I use the Cheerful Caramel & Sand palette on a website?

Use Bone #E0D9CA as the background, Coffee #74552F for text, Caramel #B48500 for buttons and links, and Sand #D0AF57 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Coffee on Bone at 4.85:1.

Which colors in Cheerful Caramel & Sand have enough contrast for text?

The highest-contrast pair is #74552F on #E0D9CA with a ratio of 4.85:1, which passes WCAG AA for normal text.

#B48500Caramel

#D0AF57Sand

#74552FCoffee

#E0D9CABone

Cheerful Caramel & Sand color palette

Warm Earthy Brown Beige Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Caramel	`#B48500`	`rgb(180, 133, 0)`	`hsl(44, 100%, 35%)`	`oklch(64.5% 0.133 83)`
Sand	`#D0AF57`	`rgb(208, 175, 87)`	`hsl(44, 56%, 58%)`	`oklch(76.6% 0.114 89)`
Coffee	`#74552F`	`rgb(116, 85, 47)`	`hsl(33, 42%, 32%)`	`oklch(47.4% 0.068 71)`
Bone	`#E0D9CA`	`rgb(224, 217, 202)`	`hsl(41, 26%, 84%)`	`oklch(88.7% 0.022 86)`

Why it works and how to use it

Cheerful Caramel & Sand is a monochromatic color palette tagged warm, earthy, brown. A monochromatic set: the same hue family from Coffee down to Bone. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

With 4 chromatic colors, Caramel takes the lead while the rest support. Lightness runs from 32% to 84%. Well suited to wellness, organic and outdoor brands.

Background: Bone (#E0D9CA) is the lightest color, so it belongs on large surfaces.
Text: Coffee (#74552F) on #E0D9CA gives 4.85:1, passing WCAG AA.
Primary: Caramel (#B48500) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Sand (#D0AF57) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Coffee on Bone at 4.85:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Cheerful Caramel & Sand

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

#B48500

#D0AF57

#74552F

#E0D9CA

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
`#74552F` on `#E0D9CA`	Aa	4.85:1	AA
`#D0AF57` on `#74552F`	Aa	3.23:1	AA large only
`#B48500` on `#E0D9CA`	Aa	2.37:1	Fail
`#B48500` on `#74552F`	Aa	2.04:1	Fail
`#B48500` on `#D0AF57`	Aa	1.58:1	Fail
`#D0AF57` on `#E0D9CA`	Aa	1.5:1	Fail

Similar palettes 24 more in this mood