Lavender color (#E6E6FA)
Lavender is one of the 148 CSS named colors. Use the keyword lavender
anywhere CSS accepts a color, or its hex code #E6E6FA, which is rgb(230, 230, 250) in RGB.
It is a very light, muted cool color with a hue angle of 240° on the HSL color wheel and a perceived lightness of 93% in OKLCH. On a lavender background, black text gives the higher contrast at 17.06:1, which passes WCAG AA for normal text.
Lavender color codes
| CSS name | lavender |
|
|---|---|---|
| HEX | #E6E6FA |
|
| HEX (8-digit) | #E6E6FAFF |
|
| RGB | rgb(230, 230, 250) |
|
| HSL | hsl(240, 67%, 94%) |
|
| HSV / HSB | hsv(240, 8%, 98%) |
|
| OKLCH | oklch(93.1% 0.0269 285.9) |
|
| CMYK | cmyk(8%, 8%, 0%, 2%) |
Contrast with white and black
WCAG 2 contrast ratios and APCA lightness contrast (Lc) for lavender used as text and as a background.
Tints and shades of lavender
Tints mix lavender with white; shades mix it with black, in 10% steps. Click a swatch to copy it, or build custom scales in the tint & shade generator.
Tints
Shades
Colors that go with lavender
Harmonies calculated on the HSL color wheel. Explore more in the color scheme generator.
Complementary
Analogous
Triadic
Split-Complementary
Lavender with color blindness
Approximately how lavender appears with each type of color vision deficiency. Test full designs with the color blindness simulator.
Using lavender in CSS
.element {
color: lavender;
background-color: #e6e6fa;
border-color: rgb(230 230 250 / 50%);
outline-color: oklch(93.1% 0.0269 285.9);
}Similar named colors
See all shades of purple or browse every CSS color name.