#3D2C11Espresso
#8B620ECocoa
#A69E58Brass
#E7EFAEVanilla

Earthy Cocoa & Brass color palette

AutumnWarmEarthyBrownBeige
Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

Earthy Cocoa & Brass is a analogous color palette tagged autumn, warm, earthy. Analogous neighbors on the wheel (Espresso, Cocoa, Brass) 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
Espresso#3D2C11rgb(61, 44, 17)hsl(37, 56%, 15%)oklch(30.6% 0.048 77)
Cocoa#8B620Ergb(139, 98, 14)hsl(40, 82%, 30%)oklch(52.6% 0.105 79)
Brass#A69E58rgb(166, 158, 88)hsl(54, 31%, 50%)oklch(69.0% 0.092 103)
Vanilla#E7EFAErgb(231, 239, 174)hsl(67, 67%, 81%)oklch(93.1% 0.084 114)

Why it works and how to use it

With 4 chromatic colors, Cocoa takes the lead while the rest support. Lightness runs from 15% to 81%. Well suited to wellness, organic and outdoor brands.

  • Background: Vanilla (#E7EFAE) is the lightest color, so it belongs on large surfaces.
  • Text: Espresso (#3D2C11) on #E7EFAE gives 11.08:1, passing WCAG AAA.
  • Primary: Cocoa (#8B620E) is the most saturated mid-tone; use it for buttons and links (4.51:1 against the background, fine for UI elements).
  • Accent: Brass (#A69E58) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Vanilla at 11.08:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Earthy Cocoa & Brass

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

#3D2C11
#8B620E
#A69E58
#E7EFAE

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#3D2C11 on #E7EFAEAa11.08:1AAA
#3D2C11 on #A69E58Aa4.88:1AA
#8B620E on #E7EFAEAa4.51:1AA
#3D2C11 on #8B620EAa2.46:1Fail
#A69E58 on #E7EFAEAa2.27:1Fail
#8B620E on #A69E58Aa1.99:1Fail

Similar palettes 24 more in this mood

More autumn palettes →More warm palettes →More earthy palettes →More brown palettes →More beige palettes →