Lavender color: code #E6E6FA

Lavender

#E6E6FA

Color codes

  • HEX#E6E6FA
  • RGBrgb(230, 230, 250)
  • HSLhsl(240, 67%, 94%)
  • HSVhsv(240, 8%, 98%)
  • CMYKcmyk(8%, 8%, 0%, 2%)
  • LABlab(91.8% 3.7 -9.7)
  • OKLCHoklch(93.1% 0.027 285.9)

About the color Lavender

Lavender has the HEX code #E6E6FA, which corresponds to rgb(230, 230, 250) in the RGB model. On the color wheel its hue sits at 240°, with 67% saturation and 94% lightness (hsl(240, 67%, 94%)).

Because of its hue it reads as a cool color: it tends to feel calm and distant, and it visually “recedes” in a composition.

As a background it calls for dark text: black reaches a 17.06:1 contrast ratio on it, versus 1.23:1 for white.

For print, the approximate conversion is cmyk(8%, 8%, 0%, 2%). Always confirm with your printer’s color profile, because the result depends on paper and ink.

Lighter tints

Darker shades

Color combinations with Lavender

Complementary

#E6E6FA · #FAFAE5

Analogous

#E5F0FA · #E6E6FA · #F0E5FA

Triadic

#E6E6FA · #FAE5E5 · #E5FAE5

Tetradic

#E6E6FA · #FAE5F0 · #FAFAE5 · #E5FAF0

Split-complementary

#E6E6FA · #FAF0E5 · #F0FAE5

Monochromatic

#7B7BE5 · #BBBBF2 · #E6E6FA · #FFFFFF · #FFFFFF

Lavender with white and black text

White text Aa Bb Cc 123
1.23:1 · fails WCAG
Black text Aa Bb Cc 123
17.06:1 · AAA

Test other pairs in the contrast checker

If you expect the color of lavender fields, #E6E6FA usually comes as a surprise. CSS lavender (rgb(230, 230, 250)) is a white with a faint blue-violet tint, far lighter than the flower. To depict the plant, shades like #B57EDC come closer; #E6E6FA works better as a haze of color, almost a cool neutral.

What lavender evokes

Lavender is often associated with calm, cleanliness and care, largely thanks to the aromatic plant used in soaps, oils and cleaning products. The purple landscapes of Provence in southern France have reinforced a romantic, countryside reading in the Western imagination. In other contexts, lavender tones simply read as “pastel,” childlike or springy. None of these readings is universal: they depend on the audience and on what the color is paired with.

How to use lavender in projects

Pairings

Some colors that get along with lavender: lilac (#C8A2C8) for a soft monochrome palette; royal blue (#4169E1) for text and buttons; silver (#C0C0C0) for a cool, clean look; and mustard (#FFDB58) as a warm counterpoint. The lilac page explains how the two differ.

Always use dark text

At 1.2:1 against white, lavender should never carry white text. Black text on #E6E6FA reaches 17:1, and a dark purple or navy works very well too. In dark mode, flip the roles: use lavender for text or icons on dark backgrounds, where it is easy on the eyes and legible. Check your pairs in the contrast checker and learn more in the contrast and accessibility guide.

How to use it in CSS

:root {
  --color-lavender: #E6E6FA;
  --color-lavender-rgb: 230, 230, 250;
}

.elemento {
  background-color: var(--color-lavender);
  color: #000000;
}

Similar colors

Use Lavender in our tools