Lavender

HEX: #E6E6FA | Modern Palette

On White
1.23:1
FAIL
On Black
17.06:1
PASS

Color Specifications

HEX
#E6E6FA
RGB
230, 230, 250
HSL
240°, 66% ,94%
CMYK
8, 8, 0, 2

About Lavender

Lavender (#E6E6FA) is a color with RGB(230, 230, 250) and HSL(240°, 66.7%, 94.1%). It is commonly associated with Playful moods. In design, it fits Cool styles and is suitable for Text, Button, Background. Its complementary color is #FAFAE6, which creates strong contrast. Its triadic palette includes #FAE6E6 and #E6FAE6. The name comes from lavare (Latin).

  • HEX: #E6E6FA
  • RGB: 230, 230, 250
  • HSL: 240°, 66.7%, 94.1%
  • Mood: Playful
  • Style: Cool
  • Use case: Text, Button, Background
  • Complementary color: #FAFAE6
  • Triadic colors: #FAE6E6, #E6FAE6
  • The name comes from lavare (Latin).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #E6E6FA from deepest shade to lightest tint.

Color Characteristics

Mood
Playful
Style
Cool
Use case
Text Button Background

Accessibility Simulation

Deuteranopia #E6E6FA
Protanopia #E6E6FA
Tritanopia #E3E9E9
Achromatopsia #E8E8E8

Frequently Asked Questions

Lavender (#E6E6FA) is a color with RGB(230, 230, 250) and HSL(240°, 66.7%, 94.1%).

#E6E6FA pairs strongly with #FAFAE6 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#E6E6FA is suitable for Text, Button, Background and works well with Cool styles.

#E6E6FA is commonly associated with Playful.

The name Lavender is linked to lavare from Latin, meaning to wash.

Name, History & Etymology

Origin Word lavare
Meaning to wash
Language Latin
First Recorded Use Middle Ages

History

The word 'lavender' is believed to derive from the Latin 'lavare' (to wash), reflecting the plant's historical use in bathing and laundry for its aromatic and antiseptic properties. The color name 'lavender' specifically refers to the pale purple hue of the lavender flower. While the plant has been cultivated for millennia, the specific color name became more common as a descriptor for shades of purple in English from the 18th century onwards, distinguishing it from darker purples or violets. Its association with cleanliness, purity, and tranquility has persisted through various cultures.

First Recorded Use

The use of 'lavender' to refer to the plant and its color dates back to the Middle Ages, likely due to its use in washing and perfumery.

Cultural Associations

Lavender is widely associated with calmness, tranquility, and relaxation. It's often used in aromatherapy to promote sleep and reduce stress. In some cultures, it symbolizes purity, devotion, and even love. It's a popular color for spring and summer fashion, home decor, and weddings, often evoking a sense of gentle elegance and natural beauty. Its scent is also a significant part of its cultural impact, used in perfumes, soaps, and sachets.

Similar Named Colors
Glitter #E6E8FA ΔE 1.36
Magnolia #F8F4FF ΔE 4.81
Ghost White #F8F8FF ΔE 6.52
Languid Lavender #D6CADD ΔE 7.68

Code Snippets

/* Background */
.element {
    background-color: #E6E6FA;
}

/* Text */
.element {
    color: #E6E6FA;
}

/* Border */
.element {
    border: 1px solid #E6E6FA;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #E6E6FA,
        #FAFAE6
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #E6E6FA,
        #FAFAE6
    );
}

// SCSS variable
$lavender: #E6E6FA;

// With RGB channels (useful for rgba() usage)
$lavender-r: 230;
$lavender-g: 230;
$lavender-b: 250;

// Usage
.element {
    background-color: $lavender;
    color: rgba($lavender-r, $lavender-g, $lavender-b, 0.8);
}