Wizard’s Potion to Icy Plains Color Palette

About this palette

Wizard’s Potion to Icy Plains is a 5-color cool, earthy, vintage palette: #635B90 (Wizard’s Potion), #D9BE86 (Vermicelles), #313C1F (Forestry), #AC8557 (Exhumed Gold), #DEDDFC (Icy Plains). It mixes purple, yellow, green, orange tones and feels cool overall. The strongest text pairing is #313C1F on #DEDDFC with a contrast ratio of 8.82:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wizard’s Potion	rgb(99, 91, 144)	hsl(249, 23%, 46%)
Vermicelles	rgb(217, 190, 134)	hsl(40, 52%, 69%)
Forestry	rgb(49, 60, 31)	hsl(83, 32%, 18%)
Exhumed Gold	rgb(172, 133, 87)	hsl(32, 34%, 51%)
Icy Plains	rgb(222, 221, 252)	hsl(242, 84%, 93%)

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.82:1 Very good#313C1F on #DEDDFC
Aa8.82:1 Very good#DEDDFC on #313C1F
Aa6.49:1 Good#D9BE86 on #313C1F
Aa6.49:1 Good#313C1F on #D9BE86
Aa4.62:1 Good#635B90 on #DEDDFC
Aa4.62:1 Good#DEDDFC on #635B90
Aa3.48:1 Poor#313C1F on #AC8557
Aa3.48:1 Poor#AC8557 on #313C1F

Color blindness preview

CSS variables

/* Wizard’s Potion to Icy Plains — https://swatchly.xyz/palette/635b90-d9be86-313c1f-ac8557-deddfc */
:root {
  --wizard-s-potion: #635b90;
  --vermicelles: #d9be86;
  --forestry: #313c1f;
  --exhumed-gold: #ac8557;
  --icy-plains: #deddfc;
}

Tailwind CSS v4

/* Wizard’s Potion to Icy Plains — https://swatchly.xyz/palette/635b90-d9be86-313c1f-ac8557-deddfc */
@theme {
  --color-wizard-s-potion: #635b90;
  --color-wizard-s-potion-50: #f5f4ff;
  --color-wizard-s-potion-100: #e9e6ff;
  --color-wizard-s-potion-200: #d3cefc;
  --color-wizard-s-potion-300: #bbb5e9;
  --color-wizard-s-potion-400: #9a93cb;
  --color-wizard-s-potion-500: #7e77ae;
  --color-wizard-s-potion-600: #635b90;
  --color-wizard-s-potion-700: #4e4775;
  --color-wizard-s-potion-800: #3d375e;
  --color-wizard-s-potion-900: #2f294b;
  --color-wizard-s-potion-950: #1d1931;
  --color-vermicelles: #d9be86;
  --color-vermicelles-50: #fff4df;
  --color-vermicelles-100: #fbeac7;
  --color-vermicelles-200: #ead6ad;
  --color-vermicelles-300: #d9be86;
  --color-vermicelles-400: #b89f6a;
  --color-vermicelles-500: #9c834d;
  --color-vermicelles-600: #816833;
  --color-vermicelles-700: #685220;
  --color-vermicelles-800: #533f12;
  --color-vermicelles-900: #403008;
  --color-vermicelles-950: #291d03;
  --color-forestry: #313c1f;
  --color-forestry-50: #f0f9e5;
  --color-forestry-100: #e6efd9;
  --color-forestry-200: #d1dcc2;
  --color-forestry-300: #bac6a9;
  --color-forestry-400: #9ba888;
  --color-forestry-500: #808e6d;
  --color-forestry-600: #677455;
  --color-forestry-700: #525d41;
  --color-forestry-800: #414b31;
  --color-forestry-900: #313c1f;
  --color-forestry-950: #1f2515;
  --color-exhumed-gold: #ac8557;
  --color-exhumed-gold-50: #fff5e9;
  --color-exhumed-gold-100: #ffead3;
  --color-exhumed-gold-200: #f4d6b4;
  --color-exhumed-gold-300: #e2bf98;
  --color-exhumed-gold-400: #c6a074;
  --color-exhumed-gold-500: #ac8557;
  --color-exhumed-gold-600: #8f693c;
  --color-exhumed-gold-700: #745228;
  --color-exhumed-gold-800: #5c3f18;
  --color-exhumed-gold-900: #482f0e;
  --color-exhumed-gold-950: #2e1c05;
  --color-icy-plains: #deddfc;
  --color-icy-plains-50: #fbfbff;
  --color-icy-plains-100: #f2f1ff;
  --color-icy-plains-200: #deddfc;
  --color-icy-plains-300: #c6c5de;
  --color-icy-plains-400: #a5a4c0;
  --color-icy-plains-500: #8887a3;
  --color-icy-plains-600: #6c6b86;
  --color-icy-plains-700: #55536c;
  --color-icy-plains-800: #414055;
  --color-icy-plains-900: #323142;
  --color-icy-plains-950: #1e1e2a;
}