Lavender Color

CSS lavender #E6E6FA — a very pale, cool blue-violet.

Lavender

#E6E6FA

HEX: #E6E6FA
RGB: rgb(230, 230, 250)
HSL: hsl(240, 66.7%, 94.1%)
HSV: hsv(240, 8%, 98%)
CMYKapproximation: cmyk(8%, 8%, 0%, 2%)
CSS name: lavender

Open lavender in the color picker to adjust it or copy other formats.

About lavender

#E6E6FA is the CSS named color lavender. It is extremely light — a hint of blue-violet on white — and much paler than the lavender flower.

For the stronger purple of lavender blossoms, a value around #B57EDC is commonly used. CSS mediumpurple (#9370DB) and plum (#DDA0DD) are the closest named colors to that floral tone.

#E6E6FA is the value of the CSS named color lavender, defined in the CSS Color specification and identical in every browser.

Other colors called lavender

Floral lavender #B57EDCThe deeper purple of lavender flowers.
Thistle (CSS) #D8BFD8A slightly deeper, pinker pale purple.

Lavender shades and tints

Shades mix lavender with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with lavender

Color harmonies based on the hue of #E6E6FA: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Lavender contrast and readability

On a lavender background, black text reads best (17.06:1). Here is how lavender works as a text color:

#E6E6FA on white

1.23:1

Normal text sample

Large text

AA normal text (4.5:1)Fail
AA large text (3:1)Fail
AAA normal text (7:1)Fail
AAA large text (4.5:1)Fail

#E6E6FA on black

17.06:1

Normal text sample

Large text

AA normal text (4.5:1)Pass
AA large text (3:1)Pass
AAA normal text (7:1)Pass
AAA large text (4.5:1)Pass

CSS lavender is a gentle background for cards, highlights and selected states with dark text. Use floral lavender or a darker purple when you need the color to be clearly visible.

Using lavender in CSS and HTML

CSS custom property

:root {
  --color-lavender: #E6E6FA;
}

.highlight {
  background-color: var(--color-lavender);
}

Background and text color

.banner {
  background-color: lavender;
  color: #000000;
}

.label {
  color: #E6E6FA;
  border: 2px solid rgb(230, 230, 250);
}

Inline style in HTML

<p style="background-color: #E6E6FA; color: #000000;">
  Lavender background
</p>