#E0B0FF

Mauve color code

Mauve hex code: #E0B0FF · RGB 224, 176, 255. Also called mallow.

What color is mauve?

Mauve is one of the most confusing color names. The reference value #E0B0FF is a pale, bright lilac-purple, named after the French word for the mallow flower. The name became famous through mauveine, the first synthetic dye, discovered by William Perkin in 1856. In fashion, weddings and makeup, though, 'mauve' usually means a dusty pink-purple closer to opera mauve (#B784A7) or mauve taupe (#915F6D).

Dusty mauves are popular for weddings, beauty and fashion brands, and moody interiors. The pale reference mauve fits playful, dreamy designs. Pick the version that matches your audience's mental picture, which is usually the dusty one.

Show both the pale and the dusty version if you're choosing colors with a client, because people mean different things by mauve. Dusty mauve pairs beautifully with sage, cream, burgundy and gold; white text works on mauve taupe but not on the pale reference value.

Mauve variants

Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.

Mauve (reference value)#E0B0FFrgb(224, 176, 255) · reference

Opera mauve (reference value)#B784A7rgb(183, 132, 167) · reference

Mauve taupe (reference value)#915F6Drgb(145, 95, 109) · reference

Dusty mauve#B08A9Argb(176, 138, 154) · HueWiz pick

Mauve on a real website

The same base color in a light and a dark theme. Surfaces and text are tinted with mauve's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.

light theme

StudioWorkAboutContact

Spring collection

Designed around mauve.

A short paragraph shows how body text reads on this surface, with an inline link in the brand color.

Get startedLearn more

NewCard on surface with an accent badge.

Light roles · surface #FAF4FF · text #251A2D · link #8B5DA6

dark theme

StudioWorkAboutContact

Spring collection

Designed around mauve.

A short paragraph shows how body text reads on this surface, with an inline link in the brand color.

Get startedLearn more

NewCard on surface with an accent badge.

Dark roles · surface #18101E · text #F2ECF6 · link #E0B0FF

Mauve color palettes

Hand-picked combinations that work with mauve. Hover a swatch to see its code; click to copy.

Mauve contrast & accessibility

WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.

Pairing	Ratio	Normal text	Large text
White text on mauve	`1.77:1`	Fail	Fail
Black text on mauve	`11.82:1`	AAA	AAA
Mauve text on white	`1.77:1`	Fail	Fail
Mauve text on near-black #111111	`10.63:1`	AAA	AAA
White text on deeper mauve #9163AC	`4.58:1`	AA	AAA

Mauve shades for Tailwind & design systems

An 11-step 50–950 ramp generated in OKLCH from #E0B0FF. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.

Tailwind CSS v4

@import "tailwindcss";

@theme {
  --color-mauve-50: #FAF4FF;
  --color-mauve-100: #F5E6FF;
  --color-mauve-200: #EBCDFF;
  --color-mauve-300: #DCACFA;
  --color-mauve-400: #BC93D6;
  --color-mauve-500: #9D7BB3;
  --color-mauve-600: #7F6391;
  --color-mauve-700: #654F74;
  --color-mauve-800: #4D3B59;
  --color-mauve-900: #36293E;
  --color-mauve-950: #201826;
  --color-mauve: #E0B0FF;
}

CSS variables

:root {
  --mauve: #E0B0FF;
  --mauve-rgb: 224 176 255;
  --mauve-light: #F5E6FF;
  --mauve-dark: #4D3B59;
}

.btn-mauve {
  background: #9163AC;
  color: #000000;
}

Need semantic roles (surface, text, primary, accent) and exports? Open mauve in the Tailwind color generator.

Mauve FAQ

What is the hex code for mauve?

#E0B0FF is the value HueWiz uses for mauve; it equals rgb(224, 176, 255). Other common versions include #B784A7 (opera mauve), #915F6D (mauve taupe), #B08A9A (dusty mauve).

Is mauve a warm or cool color?

With an HSL hue of 276° and 100% saturation, mauve reads as a cool violet.

What text color looks best on mauve?

Use dark text. White on #E0B0FF measures 1.77:1 and black measures 11.82:1; WCAG AA needs 4.5:1 for normal text. For white text, deepen it to about #9163AC.

What colors go with mauve?

Try dusty wedding (#B784A7, #E8D5D0, #FAF6F2); moody mauve (#915F6D, #B08A9A, #E9DCD6); dreamy pastel (#E0B0FF, #FFD1DC, #FFFFFF). Each palette above can be copied or opened in the HueWiz studio.