#2D1714Raisin
#78420BChocolate
#CD9341Caramel
#E1D5B9Oat

Grounded Caramel & Chocolate color palette

DarkWarmEarthyBlackBrownBeige
Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

Grounded Caramel & Chocolate is a 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.

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Raisin#2D1714rgb(45, 23, 20)hsl(7, 38%, 13%)oklch(23.4% 0.036 28)
Chocolate#78420Brgb(120, 66, 11)hsl(30, 83%, 26%)oklch(43.7% 0.098 59)
Caramel#CD9341rgb(205, 147, 65)hsl(35, 58%, 53%)oklch(70.5% 0.120 73)
Oat#E1D5B9rgb(225, 213, 185)hsl(42, 40%, 80%)oklch(87.5% 0.040 88)

Why it works and how to use it

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
Card title
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.

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#2D1714 on #E1D5B9Aa11.59:1AAA
#2D1714 on #CD9341Aa6.31:1AA
#78420B on #E1D5B9Aa5.58:1AA
#78420B on #CD9341Aa3.04:1AA large only
#2D1714 on #78420BAa2.08:1Fail
#CD9341 on #E1D5B9Aa1.84:1Fail

Similar palettes 24 more in this mood

More dark palettes →More warm palettes →More earthy palettes →More black palettes →More brown palettes →More beige palettes →