Lavender is a pale, low-saturation purple named after the flower. The CSS keyword lavender is #E6E6FA — much paler than the #967BB6 most designers mean by the word. Take the HEX codes from a scheme below, or build a custom lavender palette around any base colour with the generator.
Soft Lavender runs from a near-white #F3E8FF down to the #967BB6 base. Lavender Fields includes the CSS keyword itself, #E6E6FA, plus the pinker #D8BFD8 and #C8A2C8 at 300°. Muted Lavender is the flattest, holding 45%–47% saturation the whole way, which makes it the most usable as an interface ramp.
#F3E8FF#E0C3FC#C8A2E0#A87FCF#967BB6#E6E6FA#D8BFD8#C8A2C8#B57EDC#967BB6#EDE7F6#D1C4E9#B39DDB#9575CD#7E57C2Anchored to a lavender base — press Space or Generate to roll more schemes. Click a swatch to copy its HEX, lock one to keep it while the rest re-roll, then export as CSS, JSON or HEX.
Drag in the colour area or the hue bar, or type a HEX / RGB value, then build a scheme anchored to it.
Lavender is light and cool, so it needs one deeper tone before it can carry a layout — a plum or a deep purple works, and a soft grey keeps it calm. Sage green is the pairing florists and wedding designers reach for, because both are muted at similar lightness. Beauty, wellness, sleep and candle brands lean on it.
:root block with each colour as a custom property (--color-1, --color-2 and so on), or copy a single HEX straight from any swatch above. The generator here starts anchored to #967BB6, so the first block you copy is a set of lavender variations rather than a random hue. Copy JSON returns the same five values as an array for a build step or a token file, and Copy HEX returns them as a plain comma-separated line. Lock any swatch you want to keep before generating again and it survives into the next export.More palettes: Periwinkle palette · Plum palette · Dusty Rose palette · all colours