Black text 17.0:1
Lavender is the soft, light side of purple - lilac, wisteria, thistle and periwinkle.
Below are 25 named shades of lavender with HEX, RGB, HSL and CMYK codes.
Note that CSS lavender (#E6E6FA) is far paler than the flower - both are listed, so you can pick the one you mean.
Pale Purple - lightest25 shades sorted light to darkdarkest - Lavender Indigo
Download all 25 shades of lavender
Photoshop, Illustrator, InDesign, AffinityA Tailwind-style scale built from Lavender (floral) (#B57EDC), evenly spaced in OKLCH lightness. Paste any other lavender to build its own scale, or click a swatch for its codes and contrast.
Something went wrong. Please try again.
Still having trouble? Please contact us and we'll be happy to help!
Hmm, that doesn't look like a color yet. Try #3399cc, rgb(51, 153, 204), hsl(200, 60%, 50%) or a name like Cobalt.
#B57EDCrgb(181, 126, 220)hsl(275, 57%, 68%)cmyk(18%, 43%, 0%, 14%)Tints mixed with white
Shades mixed with black
Tones mixed with gray
Click any swatch to see its codes and contrast. Tints, shades and tones are simple RGB mixes, the classic way painters and print designers make them.
:root {
--brand-50: #f8f6fa;
--brand-100: #ece5f2;
--brand-200: #ddcdea;
--brand-300: #caace2;
--brand-400: #b57edc;
--brand-500: #a658d8;
--brand-600: #8d45ba;
--brand-700: #743b98;
--brand-800: #5d3379;
--brand-900: #4b2b61;
--brand-950: #301d3d;
}Next: blend 50 into 950 in the Gradient Generator, test every pair in the Accessible Color Palette, check 900 on 100 with the Contrast Checker or find matching colors on the Color Wheel.
Using the same color wheel maths as our Color Wheel, these are the harmonies for Lavender (floral) (#B57EDC). Click a group to open it on the wheel.
#A5DC7E Granny Smith Apple
Analogous
Next-door neighbors - calm and harmonious
#867EDC Medium Purple#DC7ED4 Orchid
Triadic
Three evenly spaced hues - bold and balanced
#DCB57E Burlywood#7EDCB5 Pearl Aqua
Split complementary
The two neighbors of the opposite - contrast with less tension
#D4DC7E Arylide Yellow#7EDC86 Pastel Green
Lavender suggests calm, grace, nostalgia and spring. It carries some of purple's elegance without its weight.
The name comes from the lavender plant, whose flowers range from pale lilac to deep violet. Lavender (floral), #B57EDC, matches the blossoms; the web color is a very pale bluish tint.
Pastel purples are big in tech and beauty branding. Trend forecaster WGSN named Digital Lavender its color of the year for 2023.
See lavender in complete, ready-made palettes - each one with codes and downloads.
Want a palette built around one exact lavender? Start from it in the AI Color Palette Generator or pull colors from a photo with the Image Color Picker.
Lavender (floral) is #B57EDC, which is rgb(181, 126, 220) and hsl(275, 57%, 68%). For print it is about 18% cyan, 43% magenta, 0% yellow and 14% black.
There is no fixed number - any lavender can be made lighter, darker or more muted. This page lists 25 named shades, from Pale Purple (#FAE6FA) to Lavender Indigo (#9457EB). The generator on this page makes a full 50-950 scale and unlimited tints, shades and tones from any lavender.
Lavender (floral) (#B57EDC) has a contrast ratio of 3.00:1 on white and 6.98:1 on black, so it reads best on dark backgrounds or with dark text on top of it. None of the named lavender shades here reach the 4.5:1 minimum on white, so use lavender as a background with dark text instead. Test any pair with the Contrast Checker.
Lilac (#C8A2C8) is a little pinker and grayer. Lavender (floral), #B57EDC, is more saturated and slightly bluer. Both are light purples named after flowers.
The CSS color lavender (#E6E6FA) comes from the old X11 color list, where it was defined as a very pale bluish white. Use #B57EDC if you want the color of lavender flowers.
Periwinkle (#CCCCFF) is a pale blue-lavender. It sits on the border between lavender and blue - darker blue-purples are on shades of purple.