Lavender Background
#E6E6FA · rgb(230, 230, 250)
About the lavender background
Lavender (#E6E6FA) is white tinged with blue-violet — rgb(230, 230, 250) — the palest purple that still reads as purple. It's the color of the flower and of calm: sleep apps, wellness brands and soft feminine design.
Because it's so close to white, it behaves like a neutral: any dark text passes contrast easily, and it builds dreamy palettes with blush pink, mint and periwinkle.
What to use a lavender background for
- Wellness, sleep and meditation apps
- Wedding and beauty branding
- Soft pastel UI themes
- Dreamy gradient starting points with pink
How to use lavender in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page lavender background */
body {
margin: 0;
background-color: #E6E6FA;
}
/* A single section or element */
.hero {
background-color: rgb(230, 230, 250);
} Lavender shades and tints
Click any swatch to copy it. Tints mix lavender with white; shades mix it with black.
Lavender background FAQ
What is the hex code for lavender?
CSS `lavender` is #E6E6FA — rgb(230, 230, 250). Note the high blue channel is what keeps it on the violet side; 'lavender blush' #FFF0F5 leans pink instead.
What colors pair with lavender?
Blush pink, mint, periwinkle and cream for soft palettes; deep purple or charcoal for text contrast. Nearly any dark ink passes WCAG on this very light background.
What is the hex code for lavender?
Lavender is #E6E6FA in hexadecimal, rgb(230, 230, 250) in RGB and hsl(240, 67%, 94%) in HSL. Paste #E6E6FA into any CSS background-color property to use it.
How do I set a lavender background in CSS?
Add background-color: #E6E6FA; to any element, or apply it to the whole page: body { background-color: #E6E6FA; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(230, 230, 250) — with identical results.