What are the hex codes in the Espresso Bar palette?

The Espresso Bar color palette consists of Raisin #2E1F1A, Coffee #725548, Mocha #A67B5B, Eggshell #F0E6DA.

How should I use the Espresso Bar palette on a website?

Use Eggshell #F0E6DA as the background, Raisin #2E1F1A for text, Mocha #A67B5B for buttons and links, and Coffee #725548 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Eggshell at 12.84:1.

Which colors in Espresso Bar have enough contrast for text?

The highest-contrast pair is #2E1F1A on #F0E6DA with a ratio of 12.84:1, which passes WCAG AA for normal text.

#2E1F1ARaisin

#725548Coffee

#A67B5BMocha

#F0E6DAEggshell

Espresso Bar color palette

Coffee Dark Muted Minimal Earthy Gray Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Raisin	`#2E1F1A`	`rgb(46, 31, 26)`	`hsl(15, 28%, 14%)`	`oklch(25.6% 0.025 39)`
Coffee	`#725548`	`rgb(114, 85, 72)`	`hsl(19, 23%, 36%)`	`oklch(47.6% 0.044 45)`
Mocha	`#A67B5B`	`rgb(166, 123, 91)`	`hsl(26, 30%, 50%)`	`oklch(61.8% 0.070 58)`
Eggshell	`#F0E6DA`	`rgb(240, 230, 218)`	`hsl(33, 42%, 90%)`	`oklch(93.0% 0.019 73)`

Why it works and how to use it

Espresso Bar is a monochromatic color palette tagged coffee, dark, muted. All four colors sit within 18° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

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

Background: Eggshell (#F0E6DA) is the lightest color, so it belongs on large surfaces.
Text: Raisin (#2E1F1A) on #F0E6DA gives 12.84:1, passing WCAG AAA.
Primary: Mocha (#A67B5B) is the most saturated mid-tone; use it for buttons and links (3.04:1 against the background, fine for UI elements).
Accent: Coffee (#725548) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Eggshell at 12.84:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Espresso Bar

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

#2E1F1A

#725548

#A67B5B

#F0E6DA

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
`#2E1F1A` on `#F0E6DA`	Aa	12.84:1	AAA
`#725548` on `#F0E6DA`	Aa	5.48:1	AA
`#2E1F1A` on `#A67B5B`	Aa	4.22:1	AA large only
`#A67B5B` on `#F0E6DA`	Aa	3.04:1	AA large only
`#2E1F1A` on `#725548`	Aa	2.34:1	Fail
`#725548` on `#A67B5B`	Aa	1.8:1	Fail

Similar palettes 24 more in this mood