What are the hex codes in the Caramel & Tan Haze palette?

The Caramel & Tan Haze color palette consists of Sepia #6B4400, Caramel #C08C22, Tan #D7B970, Bone #E4DECB.

How should I use the Caramel & Tan Haze palette on a website?

Use Bone #E4DECB as the background, Sepia #6B4400 for text, Caramel #C08C22 for buttons and links, and Tan #D7B970 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Sepia on Bone at 6.37:1.

Which colors in Caramel & Tan Haze have enough contrast for text?

The highest-contrast pair is #6B4400 on #E4DECB with a ratio of 6.37:1, which passes WCAG AA for normal text.

#6B4400Sepia

#C08C22Caramel

#D7B970Tan

#E4DECBBone

Caramel & Tan Haze color palette

Warm Earthy Brown Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Sepia	`#6B4400`	`rgb(107, 68, 0)`	`hsl(38, 100%, 21%)`	`oklch(42.1% 0.090 72)`
Caramel	`#C08C22`	`rgb(192, 140, 34)`	`hsl(40, 70%, 44%)`	`oklch(67.4% 0.130 80)`
Tan	`#D7B970`	`rgb(215, 185, 112)`	`hsl(43, 56%, 64%)`	`oklch(79.6% 0.098 88)`
Bone	`#E4DECB`	`rgb(228, 222, 203)`	`hsl(46, 32%, 85%)`	`oklch(90.0% 0.026 92)`

Why it works and how to use it

Caramel & Tan Haze is a vivid monochromatic color palette tagged warm, earthy, brown. All four colors sit within 8° 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 4 chromatic colors, Caramel takes the lead while the rest support. Lightness runs from 21% to 85%. Well suited to wellness, organic and outdoor brands.

Background: Bone (#E4DECB) is the lightest color, so it belongs on large surfaces.
Text: Sepia (#6B4400) on #E4DECB gives 6.37:1, passing WCAG AA.
Primary: Caramel (#C08C22) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Tan (#D7B970) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Caramel & Tan Haze

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

#6B4400

#C08C22

#D7B970

#E4DECB

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
`#6B4400` on `#E4DECB`	Aa	6.37:1	AA
`#6B4400` on `#D7B970`	Aa	4.51:1	AA
`#6B4400` on `#C08C22`	Aa	2.86:1	Fail
`#C08C22` on `#E4DECB`	Aa	2.22:1	Fail
`#C08C22` on `#D7B970`	Aa	1.58:1	Fail
`#D7B970` on `#E4DECB`	Aa	1.41:1	Fail

Similar palettes 24 more in this mood