Lavender Color Codes (Shades of Lavender)

Ask for "lavender" and you may get two very different colors. In CSS, lavender is #E6E6FA, a whisper-pale bluish white; the lavender flower is #B57EDC, a clear mid purple. This page lists 17 lavenders and lilacs — the 5 CSS keywords in this family (lavender, lavenderblush, thistle, plum, mediumpurple) plus floral lavender, periwinkle, pale and languid lavender, wisteria, lilac, heliotrope and others — with HEX, RGB, HSL, HSV, CMYK and OKLCH codes, tints and shades, and which of the two lavenders each one is closer to.

How to use this tool

1. Choose a lavender or lilac from the list.
2. Copy the HEX, RGB, HSL or CMYK code you need.
3. Check "Closer to" if you are matching a brief that just says "lavender".
4. Use the tints and shades table for lighter backgrounds or darker accents.

Formula

tint = c + (255 − c) × p · shade = c × (1 − p) · complement = HSL hue + 180° · "Closer to" = smaller CIEDE2000 ΔE

c is each RGB channel and p the mixing amount (15–75%). The distance uses CIELAB (D50) and the CIEDE2000 formula; below about 2 two colors are hard to tell apart, above 10 they are clearly different.

Example

Lavender (floral) is #B57EDC = rgb(181, 126, 220) = hsl(275.1, 57.3%, 67.8%), CMYK 17.7%, 42.7%, 0%, 13.7%. CSS lavender #E6E6FA is far paler at hsl(240, 66.7%, 94.1%). Black text works on both — 6.98:1 on floral lavender and 17.06:1 on CSS lavender — while white text on floral lavender reaches only 3:1, enough for large headings but not for body text. Wisteria #C9A0DC sits nearer the flower (ΔE 10.5) than the CSS keyword (ΔE 20.2).