What are the hex codes in the Caramel Latte palette?

The Caramel Latte color palette consists of Cocoa #8B5A2B, Hazelnut #C48A4E, Oat #E9C79E, Linen #FFF5E9.

How should I use the Caramel Latte palette on a website?

Use Linen #FFF5E9 as the background, Cocoa #8B5A2B for text, Oat #E9C79E for buttons and links, and Hazelnut #C48A4E for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cocoa on Linen at 5.42:1.

Which colors in Caramel Latte have enough contrast for text?

The highest-contrast pair is #8B5A2B on #FFF5E9 with a ratio of 5.42:1, which passes WCAG AA for normal text.

#8B5A2BCocoa

#C48A4EHazelnut

#E9C79EOat

#FFF5E9Linen

Caramel Latte color palette

Coffee Warm Earthy Brown Beige White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cocoa	`#8B5A2B`	`rgb(139, 90, 43)`	`hsl(29, 53%, 36%)`	`oklch(51.2% 0.090 62)`
Hazelnut	`#C48A4E`	`rgb(196, 138, 78)`	`hsl(31, 50%, 54%)`	`oklch(67.9% 0.104 65)`
Oat	`#E9C79E`	`rgb(233, 199, 158)`	`hsl(33, 63%, 77%)`	`oklch(84.9% 0.066 72)`
Linen	`#FFF5E9`	`rgb(255, 245, 233)`	`hsl(33, 100%, 96%)`	`oklch(97.5% 0.019 73)`

Why it works and how to use it

Caramel Latte is a vivid monochromatic color palette tagged coffee, warm, earthy. All four colors sit within 4° 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, Oat takes the lead while the rest support. Lightness runs from 36% to 96%. Well suited to wellness, organic and outdoor brands.

Background: Linen (#FFF5E9) is the lightest color, so it belongs on large surfaces.
Text: Cocoa (#8B5A2B) on #FFF5E9 gives 5.42:1, passing WCAG AA.
Primary: Oat (#E9C79E) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Hazelnut (#C48A4E) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cocoa on Linen at 5.42:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Caramel Latte

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

#8B5A2B

#C48A4E

#E9C79E

#FFF5E9

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
`#8B5A2B` on `#FFF5E9`	Aa	5.42:1	AA
`#8B5A2B` on `#E9C79E`	Aa	3.65:1	AA large only
`#C48A4E` on `#FFF5E9`	Aa	2.75:1	Fail
`#8B5A2B` on `#C48A4E`	Aa	1.97:1	Fail
`#C48A4E` on `#E9C79E`	Aa	1.85:1	Fail
`#E9C79E` on `#FFF5E9`	Aa	1.48:1	Fail

Similar palettes 24 more in this mood