Purple family
Lavender color
A pale, grayish blue leaning violet. The reference lavender is #E6E6FA, as defined by the CSS named color.
| HEX | #E6E6FA | |
|---|---|---|
| RGB | rgb(230, 230, 250) | |
| HSL | hsl(240, 67%, 94%) | |
| HSV | hsv(240, 8%, 98%) | |
| OKLCH | oklch(93.1% 0.027 285.9) | |
| CMYK* | 8, 8, 0, 2 |
* CMYK is a simple conversion without a print profile; ask your printer for exact values.
What color is lavender?
Lavender is a pale purple named after the flower. The CSS keyword lavender, #E6E6FA, is so light that it reads almost as a bluish white. The lavender people chose in the xkcd survey is far more colourful, closer to the flower itself.
Lavender hex codes by source
Color names are not standardized, so the same name can point to different colors. Here is every definition of lavender in our three sources, with how close each one is to the reference.
| Name | HEX | Source | Compared with the reference |
|---|---|---|---|
| Lavender | #E6E6FA | CSS named color | Reference shown on this page |
| Lavender | #C79FEF | xkcd Color Survey | Noticeably different · 25% similar |
| Lavender | #B56EDC | Color Names (meodai) | Noticeably different · 0% similar |
Lavender vs Lilac
#E6E6FA
#CEA2FD
Lilac is pinker; lavender is bluer. The two are often used interchangeably. In numbers: the two are 27% similar (OKLab distance 0.182). See Lilac for its own codes.
Colors similar to lavender
The closest named colors to #E6E6FA across all three sources, with their similarity in OKLab.
Tints and shades of lavender
The same hue from light to dark, generated in OKLab so the steps look even. Click a step to copy its HEX code.
Colors that go with lavender
Classic color-wheel combinations built on #E6E6FA, computed in OKLCH so the partners keep the same lightness and intensity. Each swatch shows the nearest common name.
Complementary
Analogous
Triadic
Split complementary
Lavender with white and black text
WCAG asks for a contrast of at least 4.5:1 for body text (AA) and 3:1 for large text. On a lavender background, black text is the better choice.
Use lavender in CSS
.lavender {
color: #E6E6FA;
/* or */ color: rgb(230 230 250);
/* or */ color: hsl(240 67% 94%);
/* or */ color: oklch(93.1% 0.027 285.9);
/* CSS keyword */ color: lavender;
}