What are the hex codes in the Grounded Caramel & Chocolate palette?

The Grounded Caramel & Chocolate color palette consists of Raisin #2D1714, Chocolate #78420B, Caramel #CD9341, Oat #E1D5B9.

How should I use the Grounded Caramel & Chocolate palette on a website?

Use Oat #E1D5B9 as the background, Raisin #2D1714 for text, Chocolate #78420B for buttons and links, and Caramel #CD9341 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Oat at 11.59:1.

Which colors in Grounded Caramel & Chocolate have enough contrast for text?

The highest-contrast pair is #2D1714 on #E1D5B9 with a ratio of 11.59:1, which passes WCAG AA for normal text.

#2D1714Raisin

#78420BChocolate

#CD9341Caramel

#E1D5B9Oat

Grounded Caramel & Chocolate color palette

Dark Warm Earthy Black Brown Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Raisin	`#2D1714`	`rgb(45, 23, 20)`	`hsl(7, 38%, 13%)`	`oklch(23.4% 0.036 28)`
Chocolate	`#78420B`	`rgb(120, 66, 11)`	`hsl(30, 83%, 26%)`	`oklch(43.7% 0.098 59)`
Caramel	`#CD9341`	`rgb(205, 147, 65)`	`hsl(35, 58%, 53%)`	`oklch(70.5% 0.120 73)`
Oat	`#E1D5B9`	`rgb(225, 213, 185)`	`hsl(42, 40%, 80%)`	`oklch(87.5% 0.040 88)`

Why it works and how to use it

Grounded Caramel & Chocolate is an analogous color palette tagged dark, warm, earthy. Analogous neighbors on the wheel (Raisin, Chocolate, Caramel) 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 strong light-to-dark ladder (80% down to 13% lightness). A natural fit for wellness, organic and outdoor brands.

Background: Oat (#E1D5B9) is the lightest color, so it belongs on large surfaces.
Text: Raisin (#2D1714) on #E1D5B9 gives 11.59:1, passing WCAG AAA.
Primary: Chocolate (#78420B) is the most saturated mid-tone; use it for buttons and links (5.58:1 against the background, fine for UI elements).
Accent: Caramel (#CD9341) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Grounded Caramel & Chocolate

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

#2D1714

#78420B

#CD9341

#E1D5B9

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
`#2D1714` on `#E1D5B9`	Aa	11.59:1	AAA
`#2D1714` on `#CD9341`	Aa	6.31:1	AA
`#78420B` on `#E1D5B9`	Aa	5.58:1	AA
`#78420B` on `#CD9341`	Aa	3.04:1	AA large only
`#2D1714` on `#78420B`	Aa	2.08:1	Fail
`#CD9341` on `#E1D5B9`	Aa	1.84:1	Fail

Similar palettes 24 more in this mood