Shades of Lavender

What this tool does

Lavender is the gentlest purple there is. It is pale, soft, and a little cool, the colour of the flower it is named after and of a calm, quiet room. Because it is so light, building a usable range from it takes care, you need it to go a touch deeper for text and contrast without losing the airy softness that makes it lavender in the first place.

That is what this does. You give it a lavender, and it builds the whole run of that lavender 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 lavenders and why this colour feels so calming.

How to use it

1. Set your lavender. When it loads, the tool shows a lavender and its Hex. Choose your own with Change Color or the Color Picker, or paste a hex directly.
2. Choose the number of shades. The Color Shades field sets how many you get, ten by default. More steps make a finer, gentler gradient.
3. Take what you need. HEX, RGB, HSL, and HSV are listed for every shade, so you can grab the right format for the job.

Lavender starts very pale, so its lighter steps quickly approach white, while the darker steps give you the soft purples you need for text and edges. Seeing the whole range at once is what makes those usable steps easy to find.

How it works

The tool runs on TinyColor, a colour library that handles lightening and darkening cleanly rather than just fading the colour out. It takes your lavender, walks it toward white on one side and black on the other, spaces the steps evenly, and converts each into the four code formats.

Since lavender is already a pale tint, the lighter end of its range turns almost white very quickly. The more useful steps are often the deeper ones, where the colour gains enough strength to hold text and define a layout while still reading as soft and calm.

The flower and the calm

Lavender the colour comes straight from lavender the plant, the fragrant herb with pale purple flowers that grows in long rows across places like Provence. The colour we call lavender is simply the soft purple of those blooms.

What makes lavender special is that it carries the plant's whole reputation with it. Lavender has been used for centuries in oils, sachets, and bedtime routines to encourage rest and ease stress, so the colour arrives already loaded with a sense of calm, cleanliness, and gentle relaxation. That is why a lavender wall or screen tends to feel soothing rather than energising, and why the colour shows up so often anywhere a design wants to slow you down and settle you.

The named lavenders, with hex codes

Lavender lives at the very pale end of purple. Below are the named lavenders, with a hex for each.

• Lavender (#E6E6FA): the standard web lavender, a very pale, slightly blue purple, almost a tinted white.
• Thistle (#D8BFD8): a touch deeper and pinker, still soft and pale.
• Lilac (around #C8A2C8): a slightly stronger, rosier pale purple.
• Lavender Blush (#FFF0F5): barely purple at all, a pale pinkish white.

The thing to notice is just how light these are. The web colour lavender is so pale it works more like an off-white with a purple hint than a colour in its own right, which is exactly why the deeper steps from this tool are so useful when you need lavender to actually do something.

Where lavender works

Lavender is the colour of calm, so it lands naturally in anything restful or gentle. It suits spa and wellness brands, beauty and skincare, sleep and meditation apps, and weddings, where its softness reads as romantic and serene. It brings a hint of colour and warmth that a plain white or grey cannot, without ever raising its voice.

Its softness is also its limit. Lavender is too pale to carry text or anchor a layout on its own, so it works best as a background, a surface, or a light accent, with something deeper handling the heavy lifting. The deeper steps from this tool give you that partner in the same colour family, so the whole design stays soft and consistent.

Building a palette from your lavender

Lavender is a natural background colour, so build outward from it. Use a pale lavender as a soft surface, a deeper lavender or purple for text and contrast, and the mid steps for buttons and accents. Keeping everything in the one family holds that calm, gentle mood.

For accents, lavender pairs sweetly with other soft colours, a sage or mint green, a blush pink, a warm cream, or a little gold or silver for a touch of shine. A deeper purple makes a good anchor when you need real contrast. Avoid loud, saturated colours next to it, since lavender's whole job is to keep things quiet, and a bright accent can shatter the calm.

Questions people ask

What colour is lavender?

A pale, soft purple with a slight blue lean, named after the flower. It is one of the lightest purples, gentle enough that it often reads almost as a tinted white.

What is the hex code for lavender?

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

Is lavender blue or purple?

It is a pale purple that leans slightly toward blue. That cool, soft quality is part of why lavender feels calm and clean rather than warm or bold.

Can I use my own lavender?

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

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. Lavender (color), the flower and the colour named after it. Wikipedia. https://en.wikipedia.org/wiki/Lavender_(color)