What are the hex codes in the Mocha & Coffee Mood palette?

The Mocha & Coffee Mood color palette consists of Mocha #9C6D59, Coffee #765143, Taupe #4E362D, Obsidian #130602.

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

Use Mocha #9C6D59 as the background, Obsidian #130602 for text, Coffee #765143 for buttons and links, and Taupe #4E362D for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Mocha on Obsidian at 4.5:1.

Which colors in Mocha & Coffee Mood have enough contrast for text?

The highest-contrast pair is #9C6D59 on #130602 with a ratio of 4.5:1, which passes WCAG AA for normal text.

#9C6D59Mocha

#765143Coffee

#4E362DTaupe

#130602Obsidian

Mocha & Coffee Mood color palette

Dark Muted Warm Earthy Brown Black

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Mocha	`#9C6D59`	`rgb(156, 109, 89)`	`hsl(18, 27%, 48%)`	`oklch(57.8% 0.067 44)`
Coffee	`#765143`	`rgb(118, 81, 67)`	`hsl(16, 28%, 36%)`	`oklch(47.1% 0.055 42)`
Taupe	`#4E362D`	`rgb(78, 54, 45)`	`hsl(16, 27%, 24%)`	`oklch(35.8% 0.038 41)`
Obsidian	`#130602`	`rgb(19, 6, 2)`	`hsl(14, 81%, 4%)`	`oklch(14.2% 0.028 47)`

Why it works and how to use it

Mocha & Coffee Mood is a dark, monochromatic color palette tagged dark, muted, warm. A monochromatic set: the same hue family from Obsidian down to Mocha. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

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

Background: Mocha (#9C6D59) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#130602) on #9C6D59 gives 4.5:1, passing WCAG AA.
Primary: Coffee (#765143) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Taupe (#4E362D) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Mocha on Obsidian at 4.5:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Mocha & Coffee Mood

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

#9C6D59

#765143

#4E362D

#130602

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
`#9C6D59` on `#130602`	Aa	4.5:1	AA
`#765143` on `#130602`	Aa	2.87:1	Fail
`#9C6D59` on `#4E362D`	Aa	2.51:1	Fail
`#4E362D` on `#130602`	Aa	1.79:1	Fail
`#765143` on `#4E362D`	Aa	1.6:1	Fail
`#9C6D59` on `#765143`	Aa	1.57:1	Fail

Similar palettes 24 more in this mood