Colors Encyclopedia

Named color

Lavender

Lavender is a pastel and light purple color with HEX #E6E6FA. According to Colors Encyclopedia, it has RGB 230, 230, 250, HSL 240, 67%, 94%, cool temperature, and is useful for wellness, beauty, and soft backgrounds.

#E6E6FA purple cool pastellight
HEX #E6E6FA
RGB rgb(230, 230, 250)
HSL hsl(240 67% 94%)
CMYK cmyk(8, 8, 0, 2)
Luminance 0.8032
Contrast Black 17.06:1White 1.23:1

CSS Utilities

--color-lavender: #E6E6FA;
.bg-lavender { background-color: #E6E6FA; }
.text-lavender { color: #E6E6FA; }
Open CSS utility pageReusable variables, classes, examples, and implementation notes

Machine-readable data

Machine-Readable Color Data (JSON)

Perfect for CSS, design systems, automation, and AI ingestion.

AI-Ready Dataset v1.0.0
Luminance0.8032
Black text17.06:1AA Pass
White text1.23:1AA Fail
hexCanonical HEX value
rgbRed, green, blue channels
hslHue, saturation, lightness
cmykApproximate print conversion
wcagAA and AAA contrast options
harmoniesMathematical harmony sets
variantsGenerated tone variants
nearestColorsKnowledge graph neighbors
Download JSON Open API
Structured 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"
  ],
  "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"
    ]
  }
}
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"
  ],
  "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"
    ]
  },
  "pairings": {
    "best": [
      "#000000",
      "#FAFAE5",
      "#E5F0FA",
      "#F0E5FA"
    ],
    "avoid": [
      "#E9E9F7",
      "#FFFFFF"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#000000"
    ],
    "lowContrast": [
      "#FFFFFF",
      "#E9E9F7"
    ]
  }
}
Dataset manifest Version 1.0.0 Build hash published in manifest Canonical page

Color meaning and use

About Lavender Color

Lavender sits in the purple family with cool temperature and pastel and light visual character. Standard CSS named color.

Its common associations include softness, calm, and care, which makes it relevant for beauty and wellness. In design work, Lavender is most useful for wellness, beauty, and soft backgrounds, especially when paired with black text for stronger contrast.

Related Color Guides

Purple color familyBrowse named purple colors and compare nearby swatches.Cool colorsExplore colors with cool temperature behavior.Pastel colorsFind colors with pastel visual character.Light colorsFind colors with light visual character.Lavender accessibilityCheck contrast and WCAG text options for #E6E6FA.Lavender CSS utilitiesUse Lavender in CSS variables and utility classes.#E6E6FA HEX atlasOpen the permanent HEX atlas record for conversions and variants.Lavender paletteOpen the generated palette based on Lavender.Lavender harmoniesExplore complementary, analogous, triadic, and tetradic harmonies.

WCAG Accessibility

Contrast checks for Lavender against black and white text.

Black text17.06:1AA Pass
White text1.23:1AA Fail
AA text options#000000, #1A1A1A, #36454F
AAA text options#000000, #1A1A1A, #36454F
Open WCAG pageDetailed contrast notes, warnings, alternatives, and UI examples

Similar Colors

Mercury#EBEBEB
Milk Blue#D6EAF8
Porcelain#F2F3F4
Alice Blue#F0F8FF
White Smoke#F5F5F5

Color Harmonies

#FAFAE5#FAFAE5
#E5F0FA#E5F0FA
#F0E5FA#F0E5FA
#FAE5E5#FAE5E5
#E5FAE5#E5FAE5
Open full Lavender harmony pageComplementary, analogous, triadic, tetradic, split, and monochromatic sets

Variants

White#FFFFFF
#9999EB#9999EB
#E2E2FD#E2E2FD
#E9E9F7#E9E9F7
White#FFFFFF
White#FFFFFF

Pairings

Black#000000
#FAFAE5#FAFAE5
#E5F0FA#E5F0FA
#F0E5FA#F0E5FA
Matte Black#1A1A1A
White Smoke#F5F5F5