Lavender Color Palette
Lavender from misty pale to deep violet, with a sage leaf green for balance. It is dreamy and calm, and the green keeps it from getting too sweet.
Click any color to copy its HEX code.
Lavender color codes
| Name | HEX | RGB | HSL | |
|---|---|---|---|---|
| Lavender Mist | #EEE8F6 | 238, 232, 246 | 266°, 44%, 94% | |
| Soft Lavender | #D4C4EC | 212, 196, 236 | 264°, 51%, 85% | |
| Lavender | #B39DDB | 179, 157, 219 | 261°, 46%, 74% | |
| Wisteria | #8E72C3 | 142, 114, 195 | 261°, 40%, 61% | |
| Deep Violet | #5B3F8C | 91, 63, 140 | 262°, 38%, 40% | |
| Sage Leaf | #9DAE8B | 157, 174, 139 | 89°, 18%, 61% |
How to use this palette
A simple way to use 6 colors without chaos is the 60-30-10 rule: about 60% of the space in the lightest shade, 30% in a supporting color and 10% in the accent. For this palette that is Lavender Mist (#EEE8F6) as the base, Soft Lavender (#D4C4EC) as the supporting color and Wisteria (#8E72C3) as the accent, with Deep Violet (#5B3F8C) for text and fine details.
Lavender
A quick preview of the palette with base, text and accent colors.
Wisteria Soft LavenderWhere it works
Readable text color pairs
These combinations reach a contrast ratio of at least 4.5:1, the WCAG AA level for normal text, so they are safe for text on websites, posters and invitations.
- Deep Violet on Lavender Mist#5B3F8C on #EEE8F6 · 6.9:1
- Deep Violet on Soft Lavender#5B3F8C on #D4C4EC · 5.1:1
CSS variables
:root {
--lavender-mist: #EEE8F6;
--soft-lavender: #D4C4EC;
--lavender: #B39DDB;
--wisteria: #8E72C3;
--deep-violet: #5B3F8C;
--sage-leaf: #9DAE8B;
}