Wizard’s Potion to Haunted Candelabra color palette

575C96Wizard’s Potion 9ABDDDBlues White Shoes D2DAF9Icy Plains 152434Dark A894C6Enchanted Lilac 5B4269Haunted Candelabra

Open in generator Export PNG, PDF, ASE…

About this palette

Wizard’s Potion to Haunted Candelabra is a 6-color cool palette: #575C96 (Wizard’s Potion), #9ABDDD (Blues White Shoes), #D2DAF9 (Icy Plains), #152434 (Dark), #A894C6 (Enchanted Lilac), #5B4269 (Haunted Candelabra). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #D2DAF9 on #152434 with a contrast ratio of 11.35:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wizard’s Potion	rgb(87, 92, 150)	hsl(235, 27%, 46%)
Blues White Shoes	rgb(154, 189, 221)	hsl(209, 50%, 74%)
Icy Plains	rgb(210, 218, 249)	hsl(228, 76%, 90%)
Dark	rgb(21, 36, 52)	hsl(211, 42%, 14%)
Enchanted Lilac	rgb(168, 148, 198)	hsl(264, 30%, 68%)
Haunted Candelabra	rgb(91, 66, 105)	hsl(278, 23%, 34%)

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.

Aa11.35:1 Very good#D2DAF9 on #152434
Aa11.35:1 Very good#152434 on #D2DAF9
Aa8.02:1 Very good#9ABDDD on #152434
Aa8.02:1 Very good#152434 on #9ABDDD
Aa6.23:1 Good#D2DAF9 on #5B4269
Aa6.23:1 Good#5B4269 on #D2DAF9
Aa5.79:1 Good#152434 on #A894C6
Aa5.79:1 Good#A894C6 on #152434

Color blindness preview

CSS variables

/* Wizard’s Potion to Haunted Candelabra — https://swatchly.xyz/palette/575c96-9abddd-d2daf9-152434-a894c6-5b4269 */
:root {
  --wizard-s-potion: #575c96;
  --blues-white-shoes: #9abddd;
  --icy-plains: #d2daf9;
  --dark: #152434;
  --enchanted-lilac: #a894c6;
  --haunted-candelabra: #5b4269;
}

Tailwind CSS v4

/* Wizard’s Potion to Haunted Candelabra — https://swatchly.xyz/palette/575c96-9abddd-d2daf9-152434-a894c6-5b4269 */
@theme {
  --color-wizard-s-potion: #575c96;
  --color-wizard-s-potion-50: #f3f4ff;
  --color-wizard-s-potion-100: #e4e8ff;
  --color-wizard-s-potion-200: #cad0ff;
  --color-wizard-s-potion-300: #b0b7f0;
  --color-wizard-s-potion-400: #8e95d2;
  --color-wizard-s-potion-500: #7278b4;
  --color-wizard-s-potion-600: #575c96;
  --color-wizard-s-potion-700: #44487a;
  --color-wizard-s-potion-800: #343863;
  --color-wizard-s-potion-900: #282a4f;
  --color-wizard-s-potion-950: #181934;
  --color-blues-white-shoes: #9abddd;
  --color-blues-white-shoes-50: #e5f3ff;
  --color-blues-white-shoes-100: #d1e9ff;
  --color-blues-white-shoes-200: #b8d4ee;
  --color-blues-white-shoes-300: #9abddd;
  --color-blues-white-shoes-400: #7e9fbd;
  --color-blues-white-shoes-500: #6485a3;
  --color-blues-white-shoes-600: #4c6c88;
  --color-blues-white-shoes-700: #39566f;
  --color-blues-white-shoes-800: #2b445a;
  --color-blues-white-shoes-900: #1f3548;
  --color-blues-white-shoes-950: #11212e;
  --color-icy-plains: #d2daf9;
  --color-icy-plains-50: #f5f7ff;
  --color-icy-plains-100: #e9eeff;
  --color-icy-plains-200: #d2daf9;
  --color-icy-plains-300: #bcc3dc;
  --color-icy-plains-400: #9ca3bf;
  --color-icy-plains-500: #7f87a3;
  --color-icy-plains-600: #656c86;
  --color-icy-plains-700: #4f546d;
  --color-icy-plains-800: #3c4156;
  --color-icy-plains-900: #2e3243;
  --color-icy-plains-950: #1b1e2b;
  --color-dark: #152434;
  --color-dark-50: #eef6ff;
  --color-dark-100: #e0edfa;
  --color-dark-200: #cbd9e9;
  --color-dark-300: #b2c3d5;
  --color-dark-400: #92a4b7;
  --color-dark-500: #77899d;
  --color-dark-600: #5e6f82;
  --color-dark-700: #49596a;
  --color-dark-800: #394656;
  --color-dark-900: #2b3744;
  --color-dark-950: #152434;
  --color-enchanted-lilac: #a894c6;
  --color-enchanted-lilac-50: #f6f1ff;
  --color-enchanted-lilac-100: #eee4ff;
  --color-enchanted-lilac-200: #ddcdf5;
  --color-enchanted-lilac-300: #c7b5e2;
  --color-enchanted-lilac-400: #a894c6;
  --color-enchanted-lilac-500: #8d79aa;
  --color-enchanted-lilac-600: #73608e;
  --color-enchanted-lilac-700: #5c4b74;
  --color-enchanted-lilac-800: #48395d;
  --color-enchanted-lilac-900: #382b4a;
  --color-enchanted-lilac-950: #231a30;
  --color-haunted-candelabra: #5b4269;
  --color-haunted-candelabra-50: #faf1ff;
  --color-haunted-candelabra-100: #f5e4ff;
  --color-haunted-candelabra-200: #e2cdef;
  --color-haunted-candelabra-300: #ccb3da;
  --color-haunted-candelabra-400: #ac91bc;
  --color-haunted-candelabra-500: #8f759f;
  --color-haunted-candelabra-600: #735a81;
  --color-haunted-candelabra-700: #5b4269;
  --color-haunted-candelabra-800: #473351;
  --color-haunted-candelabra-900: #372740;
  --color-haunted-candelabra-950: #221729;
}