Lavender Palette

CSS variables

:root {
  --color-1: #E0AAFF;
  --color-2: #C77DFF;
  --color-3: #9D4EDD;
  --color-4: #7B2CBF;
  --color-5: #5A189A;
}

Tailwind config

// tailwind.config.js
colors: {
  "lavender-1": "#E0AAFF",
  "lavender-2": "#C77DFF",
  "lavender-3": "#9D4EDD",
  "lavender-4": "#7B2CBF",
  "lavender-5": "#5A189A",
}

About this palette

The Lavender palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.

Readable text on each color

White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.

#E0AAFFNear-black10.22:1AA

#C77DFFNear-black7.02:1AA

#9D4EDDWhite4.60:1AA

#7B2CBFWhite7.11:1AA

#5A189AWhite10.33:1AA

These colours on each other

2 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.

text \\ background	#E0AAFF	#C77DFF	#9D4EDD	#7B2CBF	#5A189A
#E0AAFF	·	1.46Fails	2.49Fails	3.85Large only	5.59AA
#C77DFF	1.46Fails	·	1.71Fails	2.64Fails	3.84Large only
#9D4EDD	2.49Fails	1.71Fails	·	1.55Fails	2.25Fails
#7B2CBF	3.85Large only	2.64Fails	1.55Fails	·	1.45Fails
#5A189A	5.59AA	3.84Large only	2.25Fails	1.45Fails	·

More palettes

Gradients in the same range

Sunrise Candy Ocean

Lavender Palette

Related

Gradients in the same range