Shades of Mauve

What this tool does

Mauve is purple with the volume turned down. It is a soft, slightly greyed purple, the kind of muted, dusty colour that feels vintage and calm rather than loud. Because it is gentle to begin with, getting its range right by eye is awkward, you need a paler mauve for a background and a deeper one for contrast without losing that softness.

That is what this does. You give it a mauve, and it builds the whole run of that mauve in even steps, each with its HEX, RGB, HSL, and HSV codes ready to copy. Below the tool there is a reference of the named mauves and the surprising story of how this quiet colour changed chemistry forever.

How to use it

1. Set your mauve. The tool opens showing a mauve and its Hex. Replace it with Change Color or the Color Picker, or key in a hex of your own.
2. Set how many shades. The Color Shades control sets the number, starting at ten. Raise it for a softer gradient, drop it for wider gaps between steps.
3. Copy the values. Each shade comes with its HEX, RGB, HSL, and HSV alongside it, ready to paste into your project.

Mauve is a muted colour, so its steps stay soft as they lighten and darken rather than turning vivid. That gentleness is the whole appeal, and the reason to work from a mauve you actually like.

How it works

The tool runs on TinyColor, a colour library that lightens and darkens a colour properly instead of simply fading it. It takes your mauve, walks it toward white on one side and black on the other, spaces the steps evenly, and writes each one out in the four code formats.

Because mauve already has grey mixed into it, its range reads as a set of soft, dusty tones rather than bright ones. The lighter steps drift toward a pale lilac-grey, and the darker steps toward a deep, muted plum, all keeping that understated character.

The colour that started an industry

For such a quiet colour, mauve has a remarkable story. In 1856, an eighteen-year-old chemistry student named William Henry Perkin was trying to make synthetic quinine, a treatment for malaria, from coal tar. He failed at that, but in the mess left in his flask he noticed a brilliant purple stain. That stain was mauveine, the first synthetic dye that could be made and sold at scale.

It was a bigger deal than it sounds. Before this, purple dye was rare and costly, but Perkin's accident made it cheap, and mauve became a fashion craze, worn by Queen Victoria and the French court. More importantly, it kicked off the entire synthetic dye industry, and with it much of the modern chemical and pharmaceutical industry. The colour itself was named a few years later, after the French word for the mallow flower.

The named mauves, with hex codes

Mauve is not a standard web colour, and it has drifted in meaning over time, so its values vary more than most. Here are useful reference points, with a hex for each.

• Mauve, modern (#E0B0FF): the brighter, lighter mauve most people picture today, a soft lilac.
• Dusty Mauve (around #915F6D): closer to the original muted, greyed purple, leaning slightly pink.
• Thistle (#D8BFD8): a pale, soft mauve-pink, named after the flower.
• Plum (#DDA0DD): a gentle, slightly deeper purple-pink.
• Orchid (#DA70D6): a brighter, pinker relative for when you want more colour.

The thing to know is that mauve has shifted from the muted, greyish purple of Perkin's dye toward a brighter lilac in everyday use. So if mauve means the soft, dusty version to you, do not rely on the name, pick a hex and build from it.

Where mauve works

Mauve is the sophisticated, understated member of the purple family. The grey in it tones down purple's drama, leaving something soft, calm, and a little nostalgic. That makes it a favourite for weddings, beauty and skincare brands, and any design going for a gentle, romantic, or vintage feel.

It also works as a quiet, coloured neutral. Where a plain grey can feel cold, a mauve-grey carries a hint of warmth and personality while still staying in the background. The lighter steps from this tool are ideal for exactly that, soft surfaces that are not quite grey and not quite purple, with the deeper steps available when you need contrast.

Building a palette from your mauve

Mauve likes soft company. Use the steps from this tool as the spine of a palette: a deep mauve for text and headers, your main mauve for blocks, and a pale mauve surface behind content. Because it is muted, it rarely fights anything around it.

For accents, mauve pairs beautifully with other gentle colours, a soft sage green, a blush pink, a warm cream, or a touch of gold for a little richness. Cool greys sit naturally beside it too. The trick is to keep the whole palette soft, since mauve's charm comes from restraint, and a loud, saturated accent can break the calm mood it sets.

Questions people ask

What colour is mauve?

A soft, muted purple with grey mixed in, often leaning slightly pink. Traditionally it is quite dusty and greyed, though in everyday use mauve now often means a brighter, paler lilac.

What is the hex code for mauve?

There is no single official value, since mauve is not a standard web colour. A modern mauve sits around #E0B0FF, while the older, dustier mauve is closer to #915F6D. For an exact match, use a specific hex.

Is mauve pink or purple?

Mostly purple, but a greyed, softened purple that often carries a pink lean. That balance of purple, grey, and a little pink is what gives mauve its particular muted character.

Can I use my own mauve?

Yes. Paste your exact mauve in as the base, and the tool builds the lighter and darker steps of that colour, so you get a matching set for surfaces, text, and accents.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor
3. Science History Institute, William Henry Perkin, on the discovery of mauveine. https://www.sciencehistory.org/education/scientific-biographies/william-henry-perkin/