What are the hex codes in the Mauve & Blush Path palette?

The Mauve & Blush Path color palette consists of Espresso #411100, Cocoa #975F5F, Blush #D17E99, Mauve #F1A2D9.

How should I use the Mauve & Blush Path palette on a website?

Use Mauve #F1A2D9 as the background, Espresso #411100 for text, Blush #D17E99 for buttons and links, and Cocoa #975F5F for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Mauve at 8.36:1.

Which colors in Mauve & Blush Path have enough contrast for text?

The highest-contrast pair is #411100 on #F1A2D9 with a ratio of 8.36:1, which passes WCAG AA for normal text.

#411100Espresso

#975F5FCocoa

#D17E99Blush

#F1A2D9Mauve

Mauve & Blush Path color palette

Coffee Warm Brown Pink Purple

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Espresso	`#411100`	`rgb(65, 17, 0)`	`hsl(16, 100%, 13%)`	`oklch(25.6% 0.080 40)`
Cocoa	`#975F5F`	`rgb(151, 95, 95)`	`hsl(0, 23%, 48%)`	`oklch(54.7% 0.074 20)`
Blush	`#D17E99`	`rgb(209, 126, 153)`	`hsl(340, 47%, 66%)`	`oklch(68.9% 0.107 359)`
Mauve	`#F1A2D9`	`rgb(241, 162, 217)`	`hsl(318, 74%, 79%)`	`oklch(80.6% 0.116 339)`

Why it works and how to use it

Mauve & Blush Path is an analogous color palette tagged coffee, warm, brown. Analogous neighbors on the wheel (Espresso, Cocoa, Blush) 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 (79% down to 13% lightness). A natural fit for websites, presentations and branding.

Background: Mauve (#F1A2D9) is the lightest color, so it belongs on large surfaces.
Text: Espresso (#411100) on #F1A2D9 gives 8.36:1, passing WCAG AAA.
Primary: Blush (#D17E99) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cocoa (#975F5F) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Mauve at 8.36:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Mauve & Blush Path

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

#411100

#975F5F

#D17E99

#F1A2D9

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
`#411100` on `#F1A2D9`	Aa	8.36:1	AAA
`#411100` on `#D17E99`	Aa	5.48:1	AA
`#411100` on `#975F5F`	Aa	3.16:1	AA large only
`#975F5F` on `#F1A2D9`	Aa	2.65:1	Fail
`#975F5F` on `#D17E99`	Aa	1.74:1	Fail
`#D17E99` on `#F1A2D9`	Aa	1.52:1	Fail

Similar palettes 24 more in this mood