What are the hex codes in the Mocha & Butter palette?

The Mocha & Butter color palette consists of Mocha #A47864, Bone #E9D8C6, Peach #FFE9A8, Jet #3E322B.

How should I use the Mocha & Butter palette on a website?

Use Peach #FFE9A8 as the background, Jet #3E322B for text, Bone #E9D8C6 for buttons and links, and Mocha #A47864 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Peach on Jet at 10.3:1.

Which colors in Mocha & Butter have enough contrast for text?

The highest-contrast pair is #FFE9A8 on #3E322B with a ratio of 10.3:1, which passes WCAG AA for normal text.

#A47864Mocha

#E9D8C6Bone

#FFE9A8Peach

#3E322BJet

Mocha & Butter color palette

2026 Trends Muted Warm Brown Beige Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Mocha	`#A47864`	`rgb(164, 120, 100)`	`hsl(19, 26%, 52%)`	`oklch(61.1% 0.063 45)`
Bone	`#E9D8C6`	`rgb(233, 216, 198)`	`hsl(31, 44%, 85%)`	`oklch(89.1% 0.031 69)`
Peach	`#FFE9A8`	`rgb(255, 233, 168)`	`hsl(45, 100%, 83%)`	`oklch(93.7% 0.086 92)`
Jet	`#3E322B`	`rgb(62, 50, 43)`	`hsl(22, 18%, 21%)`	`oklch(32.8% 0.021 52)`

Why it works and how to use it

Mocha & Butter is an analogous color palette tagged 2026 trends, muted, warm. Analogous neighbors on the wheel (Mocha, Bone, Peach) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

The palette holds together thanks to its analogous hue relationship and a strong light-to-dark ladder (85% down to 21% lightness). A natural fit for websites, presentations and branding.

Background: Peach (#FFE9A8) is the lightest color, so it belongs on large surfaces.
Text: Jet (#3E322B) on #FFE9A8 gives 10.3:1, passing WCAG AAA.
Primary: Bone (#E9D8C6) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Mocha (#A47864) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Peach on Jet at 10.3:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Mocha & Butter

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

#A47864

#E9D8C6

#FFE9A8

#3E322B

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
`#FFE9A8` on `#3E322B`	Aa	10.3:1	AAA
`#E9D8C6` on `#3E322B`	Aa	8.91:1	AAA
`#A47864` on `#FFE9A8`	Aa	3.21:1	AA large only
`#A47864` on `#3E322B`	Aa	3.21:1	AA large only
`#A47864` on `#E9D8C6`	Aa	2.77:1	Fail
`#E9D8C6` on `#FFE9A8`	Aa	1.16:1	Fail

Similar palettes 24 more in this mood