Royal Purple Palette

CSS variables

:root {
  --color-1: #2E1065;
  --color-2: #5B21B6;
  --color-3: #8B5CF6;
  --color-4: #C4B5FD;
  --color-5: #F5F3FF;
}

Tailwind config

// tailwind.config.js
colors: {
  "royal-purple-1": "#2E1065",
  "royal-purple-2": "#5B21B6",
  "royal-purple-3": "#8B5CF6",
  "royal-purple-4": "#C4B5FD",
  "royal-purple-5": "#F5F3FF",
}

About this palette

The Royal Purple 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.

#2E1065White15.24:1AA

#5B21B6White8.98:1AA

#8B5CF6Near-black4.46:1Large only

#C4B5FDNear-black10.23:1AA

#F5F3FFNear-black17.23:1AA

These colours on each other

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

text \\ background	#2E1065	#5B21B6	#8B5CF6	#C4B5FD	#F5F3FF
#2E1065	·	1.70Fails	3.60Large only	8.25AA	13.89AA
#5B21B6	1.70Fails	·	2.12Fails	4.87AA	8.19AA
#8B5CF6	3.60Large only	2.12Fails	·	2.29Fails	3.86Large only
#C4B5FD	8.25AA	4.87AA	2.29Fails	·	1.68Fails
#F5F3FF	13.89AA	8.19AA	3.86Large only	1.68Fails	·

More palettes

Gradients in the same range

Ocean Arctic Slate Fade

Royal Purple Palette

Related

Gradients in the same range