Shades of Violet

What this tool does

Violet is the colour at the very end of the rainbow, just past blue, cooler and a touch more mysterious than purple. It is a lovely colour to design with, but a single violet rarely does the whole job. You need a paler one for backgrounds and a deeper one for text, and that is where building the range helps.

That is the job here. You give it a violet, and it builds the full run of that violet 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 violets, and a genuinely useful explanation of how violet differs from purple.

How to use it

1. Set your violet. On load you get a violet and its Hex. Replace it using Change Color or the Color Picker, or paste a hex of your own.
2. Set the number of shades. The Color Shades box controls how many appear, starting at ten. A higher number gives finer steps from light to deep.
3. Lift the values. Each shade shows its HEX, RGB, HSL, and HSV, ready for you to copy in the format you need.

Violet leans cool and blue, so its lighter steps drift toward soft lilac. If you want a warmer, redder result, you are really after purple, and there is a separate tool for that.

How it works

The tool is built on TinyColor, a colour library that does the lightening and darkening properly. It takes your violet, walks it toward white on one side and black on the other, spaces the steps evenly, and converts each one into the four code formats.

On a screen, violet is built from red and blue light with more blue than red, so its range tends to stay on the cool, blue side as it moves. The lighter steps open into soft lilac, and the darker steps deepen toward a near-indigo.

Violet is real, purple is a mixture

Here is a difference worth knowing, because almost nobody gets it right. Violet is a real colour of light. It sits at the short-wavelength end of the visible spectrum, around 380 to 435 nanometres, and it is one of the seven colours Isaac Newton named in the rainbow. There is an actual wavelength of light that is violet.

Purple is not like that. There is no single wavelength of light that is purple. Purple is something your brain makes when it sees red and blue light at the same time, a colour with no place of its own on the spectrum. So every rainbow contains violet, but no rainbow contains purple. On a screen the two are both built from red and blue, which blurs the line, but the underlying fact stands: violet is a colour of light, and purple is a trick of perception.

The named violets, with hex codes

Violet runs from pale and pinkish to deep and electric. Here are the named violets, each with a hex value.

• Violet, web (#EE82EE): the CSS keyword, which is actually a light, pinkish violet rather than the deep spectral colour.
• Electric Violet (#8F00FF): a vivid, intense violet, far closer to the colour at the end of the rainbow.
• Dark Violet (#9400D3): a deep, rich violet with a blue lean.
• Blue Violet (#8A2BE2): bright and lively, sitting between violet and indigo.
• Medium Orchid (#BA55D3): a softer, lighter violet with a pink tint.
• Dark Orchid (#9932CC): a deeper orchid, between violet and purple.

One thing to watch: the web colour named violet (#EE82EE) is surprisingly pale and pink, nothing like the deep violet at the edge of the spectrum. If you want that rich, near-ultraviolet colour, reach for a value like electric violet, or use a specific hex rather than the keyword.

The flower and the feeling

Violet takes its name from the flower, the small viola that gave the colour its word long before screens existed. That floral root suits it, because violet tends to read as delicate, gentle, and a little wistful, the quietest member of the purple family. We even call a shy person a shrinking violet.

In design that softness is a strength. Violet carries the creative, imaginative, and spiritual feel of purple, but in a cooler, calmer key, which makes it good for wellness, beauty, and anything that wants to feel thoughtful rather than loud. Its gentleness is also its limit, so when you want power and ceremony rather than calm, a true purple does more.

Building a palette from your violet

Violet works well as a soft lead or a cool accent. Use the steps from this tool as the spine: a deep violet for text and headers, your main violet for blocks and buttons, and a pale lilac surface behind content, which gives a calm, considered feel.

For contrast, violet's opposite on the wheel is a yellow-green, so a soft chartreuse or warm yellow lifts it nicely. Beyond that, it sits beautifully with white and pale grey for an airy look, and with soft, cool neutrals when you want it understated. Because violet is gentle to begin with, it rarely fights its neighbours, but keeping the palette quiet lets its softness come through.

Questions people ask

What is the difference between violet and purple?

Violet is a real colour of light, a single wavelength at the end of the spectrum and one of the colours of the rainbow. Purple is a mixture of red and blue with no single wavelength of its own. Violet also tends to be cooler and bluer, purple warmer and redder.

What is the hex code for violet?

The CSS keyword violet is #EE82EE, which is a light, pinkish violet. For the deep, vivid violet of the spectrum, use a value like #8F00FF, or a specific hex of your own.

Is violet in the rainbow?

Yes. Violet is the V in the rainbow, the colour at the short-wavelength end of the visible spectrum, one of the seven Newton named.

Can I use my own violet?

Yes. Paste your exact violet 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. Violet, colour of the spectrum and its relation to purple. Wikipedia. https://en.wikipedia.org/wiki/Violet_(color)