What are the hex codes in the Amethyst & Mauve Whisper palette?

The Amethyst & Mauve Whisper color palette consists of Lavender #EDE7F6, Mauve #C8AEF7, Amethyst #9173DC, Dusk #564E79.

How should I use the Amethyst & Mauve Whisper palette on a website?

Use Lavender #EDE7F6 as the background, Dusk #564E79 for text, Mauve #C8AEF7 for buttons and links, and Amethyst #9173DC for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Lavender on Dusk at 6.29:1.

Which colors in Amethyst & Mauve Whisper have enough contrast for text?

The highest-contrast pair is #EDE7F6 on #564E79 with a ratio of 6.29:1, which passes WCAG AA for normal text.

#EDE7F6Lavender

#C8AEF7Mauve

#9173DCAmethyst

#564E79Dusk

Amethyst & Mauve Whisper color palette

Cold Purple

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Lavender	`#EDE7F6`	`rgb(237, 231, 246)`	`hsl(264, 45%, 94%)`	`oklch(93.7% 0.021 304)`
Mauve	`#C8AEF7`	`rgb(200, 174, 247)`	`hsl(261, 82%, 83%)`	`oklch(79.9% 0.105 300)`
Amethyst	`#9173DC`	`rgb(145, 115, 220)`	`hsl(257, 60%, 66%)`	`oklch(63.1% 0.155 295)`
Dusk	`#564E79`	`rgb(86, 78, 121)`	`hsl(251, 22%, 39%)`	`oklch(45.0% 0.070 292)`

Why it works and how to use it

Amethyst & Mauve Whisper is a monochromatic color palette tagged cold, purple. A monochromatic set: the same hue family from Dusk down to Lavender. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.

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

Background: Lavender (#EDE7F6) is the lightest color, so it belongs on large surfaces.
Text: Dusk (#564E79) on #EDE7F6 gives 6.29:1, passing WCAG AA.
Primary: Mauve (#C8AEF7) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Amethyst (#9173DC) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Lavender on Dusk at 6.29:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Amethyst & Mauve Whisper

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

#EDE7F6

#C8AEF7

#9173DC

#564E79

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
`#EDE7F6` on `#564E79`	Aa	6.29:1	AA
`#C8AEF7` on `#564E79`	Aa	3.93:1	AA large only
`#EDE7F6` on `#9173DC`	Aa	3.05:1	AA large only
`#9173DC` on `#564E79`	Aa	2.06:1	Fail
`#C8AEF7` on `#9173DC`	Aa	1.91:1	Fail
`#EDE7F6` on `#C8AEF7`	Aa	1.6:1	Fail

Similar palettes 24 more in this mood