Colors EncyclopediaUse this color
Create with Lavender
Open a professional color tool with #E6E6FA already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Lavender and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →
CSS Utilities
--color-lavender: #E6E6FA;
.bg-lavender { background-color: #E6E6FA; }
.text-lavender { color: #E6E6FA; }Color history, meaning and use · Editorially reviewed
About Lavender Color
Lavender takes its name from Lavandula, the aromatic plant genus whose flowers range from light to dark purple and can also appear white. The plant has a long record of practical and cultural use, so the color name carries botanical associations that a generic pale violet does not.
In contemporary palettes, Lavender can work as a cool pastel, a quiet background, or a softer companion to saturated purple. Its readings are not limited to fragrance and gardens: lavender also has a documented place in LGBTQ+ cultural symbolism. Context therefore determines whether the color feels botanical, nostalgic, calming, or identity-led.
Lavender flowers and named digital lavenders vary; the HEX value here is one defined screen reference, not a botanical measurement.
WCAG Accessibility
Contrast checks for Lavender against black and white text.
Black text17.06:1AA Pass
White text1.23:1AA Fail
Downloadable color reference infographic
Lavender Color Reference Infographic
Save a high-resolution infographic of Lavender, including its color values, coordinated palette, and black and white text contrast.
Color Harmonies
Variants
Pairings
Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
Luminance0.8032
Black text17.06:1AA Pass
White text1.23:1AA Fail
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#E6E6FA",
"rgb": [
230,
230,
250
],
"hsl": [
240,
67,
94
],
"cmyk": [
8,
8,
0,
2
],
"luminance": 0.8032,
"contrast": {
"black": 17.06,
"white": 1.23
}
}WCAG
{
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A",
"#36454F"
]
}Harmonies
{
"complementary": "#FAFAE5",
"analogous": [
"#E5F0FA",
"#F0E5FA"
],
"triadic": [
"#FAE5E5",
"#E5FAE5"
],
"tetradic": [
"#FAE5F0",
"#FAFAE5",
"#E5FAF0"
],
"splitComplementary": [
"#FAF0E5",
"#F0FAE5"
],
"monochromatic": [
"#FFFFFF",
"#E6E6FA",
"#9999EB"
]
}Variants
{
"light": "#FFFFFF",
"dark": "#9999EB",
"saturated": "#E2E2FD",
"desaturated": "#E9E9F7",
"pastel": "#FFFFFF",
"neon": "#FFFFFF"
}Pairings
{
"best": [
"#000000",
"#FAFAE5",
"#E5F0FA",
"#F0E5FA"
],
"avoid": [
"#E9E9F7",
"#FFFFFF"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#FFFFFF",
"#E9E9F7"
]
}Knowledge graph
{
"nearestColors": [
"mercury",
"milk-blue",
"porcelain",
"alice-blue",
"white-smoke"
],
"generatedPalettes": [
"lavender"
],
"generatedComparisons": [
"lavender-vs-mercury",
"lavender-vs-milk-blue",
"powder-lavender-vs-lavender"
],
"relatedFamilies": [
"/colors/by-family/purple",
"/colors/by-temperature/cool",
"/colors/by-tone/pastel",
"/colors/by-tone/light"
],
"relatedTools": [
"/harmonies/lavender",
"/wcag/lavender",
"/css/colors/lavender",
"/hex/e6e6fa",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/purple",
"/colors/by-temperature/cool",
"/colors/by-tone/pastel",
"/colors/by-tone/light"
],
"narrower": [
"/palettes/lavender"
],
"related": [
"/colors/mercury",
"/colors/milk-blue",
"/colors/porcelain",
"/colors/alice-blue",
"/colors/white-smoke",
"/compare/lavender-vs-mercury",
"/compare/lavender-vs-milk-blue",
"/compare/powder-lavender-vs-lavender",
"/harmonies/lavender",
"/wcag/lavender",
"/css/colors/lavender",
"/hex/e6e6fa",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "lavender",
"name": "Lavender",
"hex": "#E6E6FA",
"family": "purple",
"temperature": "cool",
"tone": [
"pastel",
"light"
],
"uses": [
"wellness",
"beauty",
"soft backgrounds"
],
"psychology": {
"associations": [
"softness",
"calm",
"care"
],
"contexts": [
"beauty",
"wellness",
"gentle UI states"
],
"avoidIn": [
"high-urgency alert colors"
]
},
"aliases": [],
"sourceType": "standard",
"confidence": "high",
"sourceUrl": "https://www.w3.org/TR/css-color-4/#named-colors",
"reviewStatus": "auto",
"editorialNotes": "Generated from CSS named color data and computed color-system properties.",
"origin": {
"type": "css",
"notes": "Standard CSS named color."
},
"tags": [
"purple",
"cool",
"pastel",
"light",
"wellness",
"beauty",
"soft-backgrounds",
"softness",
"calm",
"care"
],
"popularity": 69,
"rgb": [
230,
230,
250
],
"hsl": [
240,
67,
94
],
"cmyk": [
8,
8,
0,
2
],
"luminance": 0.8032,
"contrast": {
"black": 17.06,
"white": 1.23
},
"harmonies": {
"complementary": "#FAFAE5",
"analogous": [
"#E5F0FA",
"#F0E5FA"
],
"triadic": [
"#FAE5E5",
"#E5FAE5"
],
"tetradic": [
"#FAE5F0",
"#FAFAE5",
"#E5FAF0"
],
"splitComplementary": [
"#FAF0E5",
"#F0FAE5"
],
"monochromatic": [
"#FFFFFF",
"#E6E6FA",
"#9999EB"
]
},
"variants": {
"light": "#FFFFFF",
"dark": "#9999EB",
"saturated": "#E2E2FD",
"desaturated": "#E9E9F7",
"pastel": "#FFFFFF",
"neon": "#FFFFFF"
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A",
"#36454F"
]
},
"css": {
"variable": "--color-lavender: #E6E6FA;",
"utility": ".bg-lavender { background-color: #E6E6FA; }",
"textUtility": ".text-lavender { color: #E6E6FA; }"
},
"nearestColors": [
"mercury",
"milk-blue",
"porcelain",
"alice-blue",
"white-smoke"
],
"generatedPalettes": [
"lavender"
],
"generatedComparisons": [
"lavender-vs-mercury",
"lavender-vs-milk-blue",
"powder-lavender-vs-lavender"
],
"relatedFamilies": [
"/colors/by-family/purple",
"/colors/by-temperature/cool",
"/colors/by-tone/pastel",
"/colors/by-tone/light"
],
"relatedTools": [
"/harmonies/lavender",
"/wcag/lavender",
"/css/colors/lavender",
"/hex/e6e6fa",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/purple",
"/colors/by-temperature/cool",
"/colors/by-tone/pastel",
"/colors/by-tone/light"
],
"narrower": [
"/palettes/lavender"
],
"related": [
"/colors/mercury",
"/colors/milk-blue",
"/colors/porcelain",
"/colors/alice-blue",
"/colors/white-smoke",
"/compare/lavender-vs-mercury",
"/compare/lavender-vs-milk-blue",
"/compare/powder-lavender-vs-lavender",
"/harmonies/lavender",
"/wcag/lavender",
"/css/colors/lavender",
"/hex/e6e6fa",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#000000",
"#FAFAE5",
"#E5F0FA",
"#F0E5FA"
],
"avoid": [
"#E9E9F7",
"#FFFFFF"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#FFFFFF",
"#E9E9F7"
]
}
}