Wizard’s Potion to Grape Taffy Color Palette

About this palette

Wizard’s Potion to Grape Taffy is a 5-color cool, gradient palette: #51639A (Wizard’s Potion), #7A7FB0 (Aster), #A59BC7 (Imperial Lilac), #D1B7DD (Viking Diva), #FED4F3 (Grape Taffy). It mixes blue, purple, pink tones and feels cool overall. The strongest text pairing is #51639A on #FED4F3 with a contrast ratio of 4.42:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wizard’s Potion	rgb(81, 99, 154)	hsl(225, 31%, 46%)
Aster	rgb(122, 127, 176)	hsl(234, 25%, 58%)
Imperial Lilac	rgb(165, 155, 199)	hsl(254, 28%, 69%)
Viking Diva	rgb(209, 183, 221)	hsl(281, 36%, 79%)
Grape Taffy	rgb(254, 212, 243)	hsl(316, 95%, 91%)

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.

Aa4.42:1 Poor#51639A on #FED4F3
Aa4.42:1 Poor#FED4F3 on #51639A
Aa3.20:1 Poor#51639A on #D1B7DD
Aa3.20:1 Poor#D1B7DD on #51639A

Color blindness preview

CSS variables

/* Wizard’s Potion to Grape Taffy — https://swatchly.xyz/palette/51639a-7a7fb0-a59bc7-d1b7dd-fed4f3 */
:root {
  --wizard-s-potion: #51639a;
  --aster: #7a7fb0;
  --imperial-lilac: #a59bc7;
  --viking-diva: #d1b7dd;
  --grape-taffy: #fed4f3;
}

Tailwind CSS v4

/* Wizard’s Potion to Grape Taffy — https://swatchly.xyz/palette/51639a-7a7fb0-a59bc7-d1b7dd-fed4f3 */
@theme {
  --color-wizard-s-potion: #51639a;
  --color-wizard-s-potion-50: #f1f5ff;
  --color-wizard-s-potion-100: #e2eaff;
  --color-wizard-s-potion-200: #c5d4ff;
  --color-wizard-s-potion-300: #a9bcf1;
  --color-wizard-s-potion-400: #879bd4;
  --color-wizard-s-potion-500: #6b7fb8;
  --color-wizard-s-potion-600: #51639a;
  --color-wizard-s-potion-700: #3e4e7e;
  --color-wizard-s-potion-800: #2f3c66;
  --color-wizard-s-potion-900: #232e51;
  --color-wizard-s-potion-950: #141c35;
  --color-aster: #7a7fb0;
  --color-aster-50: #f2f4ff;
  --color-aster-100: #e5e9ff;
  --color-aster-200: #ced3fb;
  --color-aster-300: #b6bbe9;
  --color-aster-400: #969bcc;
  --color-aster-500: #7a7fb0;
  --color-aster-600: #616593;
  --color-aster-700: #4c4f79;
  --color-aster-800: #3a3d62;
  --color-aster-900: #2c2f4d;
  --color-aster-950: #1b1c33;
  --color-imperial-lilac: #a59bc7;
  --color-imperial-lilac-50: #f6f4ff;
  --color-imperial-lilac-100: #ede8ff;
  --color-imperial-lilac-200: #dad3f5;
  --color-imperial-lilac-300: #c4bbe2;
  --color-imperial-lilac-400: #a59bc7;
  --color-imperial-lilac-500: #8980aa;
  --color-imperial-lilac-600: #6f658e;
  --color-imperial-lilac-700: #584f74;
  --color-imperial-lilac-800: #453d5d;
  --color-imperial-lilac-900: #352e49;
  --color-imperial-lilac-950: #201c2f;
  --color-viking-diva: #d1b7dd;
  --color-viking-diva-50: #fbf2ff;
  --color-viking-diva-100: #f6e5fd;
  --color-viking-diva-200: #e4d0ed;
  --color-viking-diva-300: #d1b7dd;
  --color-viking-diva-400: #b098bb;
  --color-viking-diva-500: #957ca0;
  --color-viking-diva-600: #796284;
  --color-viking-diva-700: #614c6b;
  --color-viking-diva-800: #4d3a55;
  --color-viking-diva-900: #3b2c42;
  --color-viking-diva-950: #251a2a;
  --color-grape-taffy: #fed4f3;
  --color-grape-taffy-50: #ffe5f8;
  --color-grape-taffy-100: #fed4f3;
  --color-grape-taffy-200: #e6c5dd;
  --color-grape-taffy-300: #d2afc9;
  --color-grape-taffy-400: #b690ac;
  --color-grape-taffy-500: #9c7692;
  --color-grape-taffy-600: #815d78;
  --color-grape-taffy-700: #694962;
  --color-grape-taffy-800: #54384d;
  --color-grape-taffy-900: #412a3c;
  --color-grape-taffy-950: #2a1926;
}