Shades of Purple

What this tool does

Purple is red and blue at the same time, which is part of why it feels special. It is the colour of kings and creativity, deep and a little dramatic. But it covers a lot of ground, from a red-leaning grape to a blue-leaning indigo, so once you pick a purple you usually need its lighter and darker relatives to build anything with it.

That is the job here. You give it a purple, and it builds the whole run of that purple 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 purples, including one with a story behind it that most colour charts skip.

How to use it

1. Set your purple. The tool starts on a purple, with its Hex shown. Swap in your own through Change Color or the Color Picker, or enter a hex straight off.
2. Choose how many shades. The Color Shades number decides the count, ten unless you change it. Turn it up for a smoother gradient, down for bolder jumps.
3. Take the codes. HEX, RGB, HSL, and HSV appear next to each shade, so you copy whichever format your project speaks.

Purple swings between warm and cool, so a red-purple and a blue-purple lighten quite differently. Start from the exact purple you mean and the range keeps its character.

How it works

The tool uses TinyColor, a colour library that handles the lightening and darkening for you. It takes your purple, walks it toward white on one side and black on the other, spaces the steps evenly across that range, and writes each one out in the four code formats.

Purple sits between red and blue rather than at a single point, so the range it produces is rich: pale lilacs and lavenders at the light end, deep aubergines and plums at the dark end, all stemming from your one starting colour.

The colour of kings

For most of history, purple meant power, and the reason is pure economics. The original royal purple, Tyrian purple, was made from sea snails, and it took something like ten thousand of them to produce a single gram of dye. That made it cost more than its weight in gold. Only emperors and the very wealthy could afford it, so the colour became a badge of rank in itself.

That is why Roman emperors wore purple togas, why Byzantine rulers kept it for centuries, and why we still say someone important was born to the purple. The colour carried status not because of any meaning in the hue, but simply because almost nobody could get it. When synthetic dyes finally made purple cheap in the 1850s, that exclusivity faded, but the association with royalty and luxury has never really left it.

The named purples, with hex codes

Purple has a wide family, from red-leaning to blue-leaning. Here are the useful named ones, with a hex for each.

• Purple (#800080): the standard web purple, a balanced mid purple.
• Dark Magenta (#8B008B): a red-leaning purple with real punch.
• Dark Violet (#9400D3) and Dark Orchid (#9932CC): deep, vivid, blue-leaning purples.
• Blue Violet (#8A2BE2): bright and energetic, tipping toward indigo.
• Medium Purple (#9370DB): a softer, friendlier purple.
• Rebecca Purple (#663399): a deep, even purple, added to the web colours in 2014.
• Plum (#DDA0DD), Orchid (#DA70D6), and Thistle (#D8BFD8): pale, soft purples for backgrounds.

Rebecca Purple is worth a moment. It was added to the official web colour list in 2014 in memory of Rebecca Meyer, the young daughter of the web pioneer Eric Meyer, who died of cancer at the age of six. Purple was her favourite colour, and the web community made it part of the language designers use every day. It is a rare case of a colour name carrying a genuine human story.

What purple says

Purple still leans on its royal past. It reads as luxury, quality, and a touch of ceremony, which is why it turns up on premium products and anything that wants to feel a cut above. It is also strongly tied to creativity, imagination, and the spiritual or mysterious, partly because true purple is genuinely rare in nature, so it feels slightly otherworldly.

The exact shade shifts the message. A deep, blue-leaning purple feels serious and regal, while a soft lavender feels calm and gentle, and a bright red-purple feels playful and modern. So it is worth being clear which purple you are reaching for, since the same colour family can say royalty, wellness, or fun depending on where you land in it.

Building a palette from your purple

Purple makes a strong lead colour. Use the steps from this tool as the spine: a deep purple for text and headers, your main purple for blocks and buttons, and a pale lilac surface behind content. That alone gives a layout depth and a sense of occasion.

For accents, purple's opposite on the wheel is yellow, so a warm gold makes a rich, regal pairing and a brighter yellow makes a bold one. Beyond that, purple sits comfortably on neutral grounds, grey, white, and cream all let it breathe, and a little silver leans cool and modern while gold leans warm and luxurious. Because purple is already a statement, keep the accents simple so it stays the star.

Questions people ask

What is the hex code for purple?

The standard web value is #800080. It is one of the named CSS colours, so you can also just write "purple" in your stylesheet, while a specific brand purple will have its own hex.

Are purple and violet the same colour?

Not quite. Violet is a true colour of the rainbow, a single wavelength of light, while purple is a mixture your eye makes from red and blue. In everyday use the words overlap, but there is a real difference, covered on the violet tool.

Why was purple the colour of royalty?

Because the original purple dye was extraordinarily expensive, made from thousands of sea snails, so only rulers and the rich could afford it. The colour signalled wealth and rank long before it meant anything else.

Can I use my own purple?

Yes. Paste your exact purple 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. Tyrian purple, the ancient royal dye. Wikipedia. https://en.wikipedia.org/wiki/Tyrian_purple