13 Shades of Lavender with Hex Codes
Lavender is purple at high lightness and low saturation — soft, cool, and calm.
The lavender hex code is #E6E6FA
#E6E6FA is rgb(230, 230, 250) in RGB, hsl(240, 67%, 94%) in HSL, and about cmyk(8%, 8%, 0%, 2%) in CMYK. Every other lavender below has its own hex code.
#E6E6FArgb(230, 230, 250)hsl(240, 67%, 94%)Named Lavender Colors and Their Hex Codes
Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.
#9370DBrgb(147, 112, 219)#DA70D6rgb(218, 112, 214)#EE82EErgb(238, 130, 238)#C8A2C8rgb(200, 162, 200)#C9A0DCrgb(201, 160, 220)#DDA0DDrgb(221, 160, 221)#C8B7C9rgb(200, 183, 201)#E0B0FFrgb(224, 176, 255)#D8BFD8rgb(216, 191, 216)#CCCCFFrgb(204, 204, 255)#DCD0FFrgb(220, 208, 255)#E6E6FArgb(230, 230, 250)#FFF0F5rgb(255, 240, 245)LavenderColor Chart: Hex, RGB, HSL & CMYK
Every lavender above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.
| Name | Hex | RGB | HSL | CMYK |
|---|---|---|---|---|
| MediumPurple | #9370DB | rgb(147, 112, 219) | hsl(260, 60%, 65%) | cmyk(33%, 49%, 0%, 14%) |
| Orchid | #DA70D6 | rgb(218, 112, 214) | hsl(302, 59%, 65%) | cmyk(0%, 49%, 2%, 15%) |
| Violet | #EE82EE | rgb(238, 130, 238) | hsl(300, 76%, 72%) | cmyk(0%, 45%, 0%, 7%) |
| Lilac | #C8A2C8 | rgb(200, 162, 200) | hsl(300, 26%, 71%) | cmyk(0%, 19%, 0%, 22%) |
| Wisteria | #C9A0DC | rgb(201, 160, 220) | hsl(281, 46%, 75%) | cmyk(9%, 27%, 0%, 14%) |
| Plum | #DDA0DD | rgb(221, 160, 221) | hsl(300, 47%, 75%) | cmyk(0%, 28%, 0%, 13%) |
| Digital Lavender | #C8B7C9 | rgb(200, 183, 201) | hsl(297, 14%, 75%) | cmyk(0%, 9%, 0%, 21%) |
| Mauve | #E0B0FF | rgb(224, 176, 255) | hsl(276, 100%, 85%) | cmyk(12%, 31%, 0%, 0%) |
| Thistle | #D8BFD8 | rgb(216, 191, 216) | hsl(300, 24%, 80%) | cmyk(0%, 12%, 0%, 15%) |
| Periwinkle | #CCCCFF | rgb(204, 204, 255) | hsl(240, 100%, 90%) | cmyk(20%, 20%, 0%, 0%) |
| Pale Lilac | #DCD0FF | rgb(220, 208, 255) | hsl(255, 100%, 91%) | cmyk(14%, 18%, 0%, 0%) |
| Lavender | #E6E6FA | rgb(230, 230, 250) | hsl(240, 67%, 94%) | cmyk(8%, 8%, 0%, 2%) |
| LavenderBlush | #FFF0F5 | rgb(255, 240, 245) | hsl(340, 100%, 97%) | cmyk(0%, 6%, 4%, 0%) |
Lavender Scale from Light to Dark
A 12-step lightness scale built from the core lavender hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.
Need a perceptually even ramp with semantic roles and contrast evidence? Generate lavender design tokens.
What Lavender Communicates
Lavender is the pale end of purple, and its usefulness comes from being a background rather than a statement. Every value here sits above 80% lightness, so they hold dark text easily and carry none themselves. Periwinkle, the blue-leaning member of the family, is the one that reads as a color rather than a tint.
Where lavender works well
- Soft backgrounds and card surfaces with a cool cast
- Wellness, beauty, and sleep-adjacent brands
- Tinted surfaces in a purple design system, usually the 50-100 steps
- Pastel palettes alongside mint, blush, and butter
Colors that pair with lavender
Copy the Lavender Palette as CSS
Every shade on this page as CSS custom properties, ready to paste into a stylesheet.
:root {
--lavender-mediumpurple: #9370DB;
--lavender-orchid: #DA70D6;
--lavender-violet: #EE82EE;
--lavender-lilac: #C8A2C8;
--lavender-wisteria: #C9A0DC;
--lavender-plum: #DDA0DD;
--lavender-digital-lavender: #C8B7C9;
--lavender-mauve: #E0B0FF;
--lavender-thistle: #D8BFD8;
--lavender-periwinkle: #CCCCFF;
--lavender-pale-lilac: #DCD0FF;
--lavender-lavender: #E6E6FA;
--lavender-lavenderblush: #FFF0F5;
}Lavender Color Questions
What is the hex code for lavender?
The standard lavender hex code is #E6E6FA, which is rgb(230, 230, 250) in RGB and hsl(240, 67%, 94%) in HSL. There is no single "correct" lavender — this page lists 13 named lavender shades with their own hex codes.
How many shades of lavender are there?
Displays can render millions of distinct lavender values, so any count is a matter of which ones have names. This page lists 13 named shades of lavender, combining the CSS color keywords with widely used lavender names from design and print references, plus a generated 12-step lightness scale.
Can I use lavender for text on a white background?
#E6E6FA scores 1.23:1 against white. WCAG 2.2 asks for at least 4.5:1 for normal body text and 3:1 for large text, so this shade does not pass and needs to be darkened. Check any specific pairing in the contrast checker.
What colors go well with lavender?
yellow, green, gray all pair well with lavender. For a specific shade, open its color page to see the complementary, analogous, and triadic colors calculated from its exact hue.