Lavender color guide
So pale it functions as a cool neutral. One of the most useful tints available for backgrounds that need to feel soft rather than clinical.
- Best for
- Tinted surfaces and empty states.
Accessibility
Ratios follow WCAG 2.1. AA needs 4.5:1 for body text, AAA needs 7:1; large text passes AA at 3:1.
Colors that go with lavender
Combinations that hold up in a real layout rather than only on the colour wheel.
Lavender color harmonies
Lavender shades and tints
The same hue and saturation across ten lightness steps — the basis of a usable colour ramp in a design system.
Lavender FAQ
What is the hex code for lavender?
Lavender is #E6E6FA. In other formats that is rgb(230, 230, 250), hsl(240, 67%, 94%), and approximately cmyk(8%, 8%, 0%, 2%) for print.
What colors go with lavender?
Midnight Blue, Charcoal, Plum all pair well with lavender. Tinted surfaces and empty states.
Is lavender accessible for text?
Not on white: lavender reaches only 1.23:1 there, below the 4.5:1 WCAG AA threshold. Use it as a background with black text on top, or reserve it for large display type.
Should text on lavender be black or white?
Use black text. It gives the higher contrast ratio of the two against #E6E6FA.