What are the hex codes in the Bold Caramel & Coffee palette?

The Bold Caramel & Coffee color palette consists of Raisin #261D00, Coffee #735800, Caramel #C29923, Pearl #EBE2C4.

How should I use the Bold Caramel & Coffee palette on a website?

Use Pearl #EBE2C4 as the background, Raisin #261D00 for text, Coffee #735800 for buttons and links, and Caramel #C29923 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Pearl at 12.88:1.

Which colors in Bold Caramel & Coffee have enough contrast for text?

The highest-contrast pair is #261D00 on #EBE2C4 with a ratio of 12.88:1, which passes WCAG AA for normal text.

#261D00Raisin

#735800Coffee

#C29923Caramel

#EBE2C4Pearl

Bold Caramel & Coffee color palette

Dark Warm Earthy Black Brown Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Raisin	`#261D00`	`rgb(38, 29, 0)`	`hsl(46, 100%, 7%)`	`oklch(23.5% 0.048 92)`
Coffee	`#735800`	`rgb(115, 88, 0)`	`hsl(46, 100%, 23%)`	`oklch(47.5% 0.097 88)`
Caramel	`#C29923`	`rgb(194, 153, 35)`	`hsl(45, 69%, 45%)`	`oklch(70.2% 0.134 88)`
Pearl	`#EBE2C4`	`rgb(235, 226, 196)`	`hsl(46, 49%, 85%)`	`oklch(91.2% 0.041 93)`

Why it works and how to use it

Bold Caramel & Coffee is a vivid monochromatic color palette tagged dark, warm, earthy. All four colors sit within 1° of hue, so the scheme reads as one color explored across light and dark. These are bold, punchy colors that need generous white space around them. The overall temperature is warm.

With 3 chromatic colors, Coffee takes the lead while the rest support. Lightness runs from 7% to 85%. Well suited to wellness, organic and outdoor brands.

Background: Pearl (#EBE2C4) is the lightest color, so it belongs on large surfaces.
Text: Raisin (#261D00) on #EBE2C4 gives 12.88:1, passing WCAG AAA.
Primary: Coffee (#735800) is the most saturated mid-tone; use it for buttons and links (5.19:1 against the background, fine for UI elements).
Accent: Caramel (#C29923) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Bold Caramel & Coffee

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

#261D00

#735800

#C29923

#EBE2C4

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
`#261D00` on `#EBE2C4`	Aa	12.88:1	AAA
`#261D00` on `#C29923`	Aa	6.26:1	AA
`#735800` on `#EBE2C4`	Aa	5.19:1	AA
`#735800` on `#C29923`	Aa	2.52:1	Fail
`#261D00` on `#735800`	Aa	2.48:1	Fail
`#C29923` on `#EBE2C4`	Aa	2.06:1	Fail

Similar palettes 24 more in this mood