Violet Voltage to Enchanted Lavender color palette

A571CFViolet Voltage 9247ABFuchsia Pheromone 5A3568Purple Protégé F6E2FFMinute Mauve C29FDCEnchanted Lavender

Open in generator Export PNG, PDF, ASE…

About this palette

Violet Voltage to Enchanted Lavender is a 5-color cool, monochromatic palette: #A571CF (Violet Voltage), #9247AB (Fuchsia Pheromone), #5A3568 (Purple Protégé), #F6E2FF (Minute Mauve), #C29FDC (Enchanted Lavender). It mixes purple tones and feels cool overall. The strongest text pairing is #5A3568 on #F6E2FF with a contrast ratio of 8.04:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violet Voltage	rgb(165, 113, 207)	hsl(273, 49%, 63%)
Fuchsia Pheromone	rgb(146, 71, 171)	hsl(285, 41%, 47%)
Purple Protégé	rgb(90, 53, 104)	hsl(284, 32%, 31%)
Minute Mauve	rgb(246, 226, 255)	hsl(281, 100%, 94%)
Enchanted Lavender	rgb(194, 159, 220)	hsl(274, 47%, 74%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa8.04:1 Very good#5A3568 on #F6E2FF
Aa8.04:1 Very good#F6E2FF on #5A3568
Aa4.65:1 Good#9247AB on #F6E2FF
Aa4.65:1 Good#F6E2FF on #9247AB
Aa4.33:1 Poor#5A3568 on #C29FDC
Aa4.33:1 Poor#C29FDC on #5A3568

Color blindness preview

CSS variables

/* Violet Voltage to Enchanted Lavender — https://swatchly.xyz/palette/a571cf-9247ab-5a3568-f6e2ff-c29fdc */
:root {
  --violet-voltage: #a571cf;
  --fuchsia-pheromone: #9247ab;
  --purple-prot-g: #5a3568;
  --minute-mauve: #f6e2ff;
  --enchanted-lavender: #c29fdc;
}

Tailwind CSS v4

/* Violet Voltage to Enchanted Lavender — https://swatchly.xyz/palette/a571cf-9247ab-5a3568-f6e2ff-c29fdc */
@theme {
  --color-violet-voltage: #a571cf;
  --color-violet-voltage-50: #f9f3ff;
  --color-violet-voltage-100: #f4e8ff;
  --color-violet-voltage-200: #e8cfff;
  --color-violet-voltage-300: #dab1ff;
  --color-violet-voltage-400: #bf8de9;
  --color-violet-voltage-500: #a571cf;
  --color-violet-voltage-600: #8855b0;
  --color-violet-voltage-700: #6e3f92;
  --color-violet-voltage-800: #582d77;
  --color-violet-voltage-900: #44205e;
  --color-violet-voltage-950: #2b113e;
  --color-fuchsia-pheromone: #9247ab;
  --color-fuchsia-pheromone-50: #fbf1ff;
  --color-fuchsia-pheromone-100: #f7e3ff;
  --color-fuchsia-pheromone-200: #f0c6ff;
  --color-fuchsia-pheromone-300: #e6a4fe;
  --color-fuchsia-pheromone-400: #c980e3;
  --color-fuchsia-pheromone-500: #ae62c8;
  --color-fuchsia-pheromone-600: #9247ab;
  --color-fuchsia-pheromone-700: #77338d;
  --color-fuchsia-pheromone-800: #5f2273;
  --color-fuchsia-pheromone-900: #4b175c;
  --color-fuchsia-pheromone-950: #310a3c;
  --color-purple-prot-g: #5a3568;
  --color-purple-prot-g-50: #fbf1ff;
  --color-purple-prot-g-100: #f7e3ff;
  --color-purple-prot-g-200: #eacaf7;
  --color-purple-prot-g-300: #d6b2e5;
  --color-purple-prot-g-400: #b992c9;
  --color-purple-prot-g-500: #9f77af;
  --color-purple-prot-g-600: #845e93;
  --color-purple-prot-g-700: #6c497a;
  --color-purple-prot-g-800: #5a3568;
  --color-purple-prot-g-900: #452a4f;
  --color-purple-prot-g-950: #2c1934;
  --color-minute-mauve: #f6e2ff;
  --color-minute-mauve-50: #faf0ff;
  --color-minute-mauve-100: #f6e2ff;
  --color-minute-mauve-200: #dfd1e6;
  --color-minute-mauve-300: #cab9d1;
  --color-minute-mauve-400: #ab9ab4;
  --color-minute-mauve-500: #907e98;
  --color-minute-mauve-600: #75647d;
  --color-minute-mauve-700: #5e4f65;
  --color-minute-mauve-800: #4a3c50;
  --color-minute-mauve-900: #392e3e;
  --color-minute-mauve-950: #241c27;
  --color-enchanted-lavender: #c29fdc;
  --color-enchanted-lavender-50: #fcf8ff;
  --color-enchanted-lavender-100: #f8eeff;
  --color-enchanted-lavender-200: #edd7ff;
  --color-enchanted-lavender-300: #dcc0f2;
  --color-enchanted-lavender-400: #c29fdc;
  --color-enchanted-lavender-500: #a381bc;
  --color-enchanted-lavender-600: #85649d;
  --color-enchanted-lavender-700: #6b4d80;
  --color-enchanted-lavender-800: #543966;
  --color-enchanted-lavender-900: #40294f;
  --color-enchanted-lavender-950: #271732;
}