CSS Color: Lavender
Named CSS color Lavender — #E6E6FA in HEX, rgb(230, 230, 250) in RGB, hsl(240, 67%, 94%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Lavender | color: Lavender; |
| HEX | #E6E6FA | color: #E6E6FA; |
| RGB | rgb(230, 230, 250) | color: rgb(230, 230, 250); |
| HSL | hsl(240, 67%, 94%) | color: hsl(240, 67%, 94%); |
About Lavender
Lavender is an extremely pale blue-violet that is nearly white with just a hint of purple. At hex `#E6E6FA`, all three channels are high (230, 230, 250), with blue slightly dominant. Its 240-degree hue places it at pure blue, with 67% saturation and 94% lightness.
In web design, Lavender is used as a subtle background alternative to pure white. It adds a touch of warmth and personality while remaining neutral enough for any content. It is popular in portfolios, blogs, and clean minimal designs where pure white feels too sterile.
For accessibility, Lavender is essentially a background color. Against white, it achieves only about 1.1:1 contrast — nearly invisible. Any text on Lavender backgrounds must be very dark for readability.
Lavender creates a serene, calming atmosphere that is popular in meditation apps, spa websites, and modern minimalist designs. It pairs well with deep purple, navy, dark gray, and soft gold. In Tailwind CSS, `violet-100` or `purple-50` provide similar nearly-white violet tones.
FAQ
What is the hex code for Lavender?
The CSS named color Lavender has the hex code #E6E6FA. You can use it in CSS as color: #E6E6FA; or simply color: Lavender;.
What is Lavender in RGB?
In RGB notation, Lavender is rgb(230, 230, 250). Use it in CSS as color: rgb(230, 230, 250);.
What is Lavender in HSL?
In HSL notation, Lavender is hsl(240, 67%, 94%). Use it in CSS as color: hsl(240, 67%, 94%);.
What color category is Lavender?
Lavender belongs to the Purple color family in the CSS named colors specification.
Can I use the name "Lavender" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Lavender; or background-color: Lavender; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Lavender to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →