What are the hex codes in the Café Mint palette?

The Café Mint color palette consists of Espresso #3B2A22, Cocoa #7A5A48, Turquoise #8FD3C0, Linen #F5F1EC.

How should I use the Café Mint palette on a website?

Use Linen #F5F1EC as the background, Espresso #3B2A22 for text, Turquoise #8FD3C0 for buttons and links, and Cocoa #7A5A48 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Linen at 12.13:1.

Which colors in Café Mint have enough contrast for text?

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

#3B2A22Espresso

#7A5A48Cocoa

#8FD3C0Turquoise

#F5F1ECLinen

Café Mint color palette

Coffee Modern Muted Minimal Gray Brown Teal White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Espresso	`#3B2A22`	`rgb(59, 42, 34)`	`hsl(19, 27%, 18%)`	`oklch(30.3% 0.029 46)`
Cocoa	`#7A5A48`	`rgb(122, 90, 72)`	`hsl(22, 26%, 38%)`	`oklch(49.6% 0.051 51)`
Turquoise	`#8FD3C0`	`rgb(143, 211, 192)`	`hsl(163, 44%, 69%)`	`oklch(81.6% 0.074 175)`
Linen	`#F5F1EC`	`rgb(245, 241, 236)`	`hsl(33, 31%, 94%)`	`oklch(96.0% 0.008 74)`

Why it works and how to use it

Café Mint is a complementary color palette tagged coffee, modern, muted. Near-complementary hues (about 144° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Turquoise takes the lead while the rest support. Lightness runs from 18% to 94%. Well suited to websites, presentations and branding.

Background: Linen (#F5F1EC) is the lightest color, so it belongs on large surfaces.
Text: Espresso (#3B2A22) on #F5F1EC gives 12.13:1, passing WCAG AAA.
Primary: Turquoise (#8FD3C0) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cocoa (#7A5A48) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Café Mint

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

#3B2A22

#7A5A48

#8FD3C0

#F5F1EC

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
`#3B2A22` on `#F5F1EC`	Aa	12.13:1	AAA
`#3B2A22` on `#8FD3C0`	Aa	7.95:1	AAA
`#7A5A48` on `#F5F1EC`	Aa	5.52:1	AA
`#7A5A48` on `#8FD3C0`	Aa	3.62:1	AA large only
`#3B2A22` on `#7A5A48`	Aa	2.2:1	Fail
`#8FD3C0` on `#F5F1EC`	Aa	1.52:1	Fail

Similar palettes 24 more in this mood