Wizard to Gentle Glow Color Palette

About this palette

Wizard to Gentle Glow is a 5-color warm, vintage palette: #4F5F86 (Wizard), #DDB2C4 (Mental Floss), #AA7485 (Never Forget), #024330 (Lost in the Woods), #F4E8BD (Gentle Glow). It mixes blue, pink, turquoise, yellow tones and feels warm overall. The strongest text pairing is #024330 on #F4E8BD with a contrast ratio of 9.27:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wizard	rgb(79, 95, 134)	hsl(223, 26%, 42%)
Mental Floss	rgb(221, 178, 196)	hsl(335, 39%, 78%)
Never Forget	rgb(170, 116, 133)	hsl(341, 24%, 56%)
Lost in the Woods	rgb(2, 67, 48)	hsl(162, 94%, 14%)
Gentle Glow	rgb(244, 232, 189)	hsl(47, 71%, 85%)

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.

Aa9.27:1 Very good#024330 on #F4E8BD
Aa9.27:1 Very good#F4E8BD on #024330
Aa6.08:1 Good#DDB2C4 on #024330
Aa6.08:1 Good#024330 on #DDB2C4
Aa5.17:1 Good#4F5F86 on #F4E8BD
Aa5.17:1 Good#F4E8BD on #4F5F86
Aa3.39:1 Poor#4F5F86 on #DDB2C4
Aa3.39:1 Poor#DDB2C4 on #4F5F86

Color blindness preview

CSS variables

/* Wizard to Gentle Glow — https://swatchly.xyz/palette/4f5f86-ddb2c4-aa7485-024330-f4e8bd */
:root {
  --wizard: #4f5f86;
  --mental-floss: #ddb2c4;
  --never-forget: #aa7485;
  --lost-in-the-woods: #024330;
  --gentle-glow: #f4e8bd;
}

Tailwind CSS v4

/* Wizard to Gentle Glow — https://swatchly.xyz/palette/4f5f86-ddb2c4-aa7485-024330-f4e8bd */
@theme {
  --color-wizard: #4f5f86;
  --color-wizard-50: #f1f5ff;
  --color-wizard-100: #e2ebff;
  --color-wizard-200: #cbd9fa;
  --color-wizard-300: #b5c5ea;
  --color-wizard-400: #96a7d0;
  --color-wizard-500: #7c8db7;
  --color-wizard-600: #64749c;
  --color-wizard-700: #4f5f86;
  --color-wizard-800: #3d4a6b;
  --color-wizard-900: #2d3955;
  --color-wizard-950: #1b2338;
  --color-mental-floss: #ddb2c4;
  --color-mental-floss-50: #fff0f6;
  --color-mental-floss-100: #fee2ed;
  --color-mental-floss-200: #edccda;
  --color-mental-floss-300: #ddb2c4;
  --color-mental-floss-400: #bc94a4;
  --color-mental-floss-500: #a07889;
  --color-mental-floss-600: #845f6f;
  --color-mental-floss-700: #6b4958;
  --color-mental-floss-800: #553845;
  --color-mental-floss-900: #432a35;
  --color-mental-floss-950: #2b1921;
  --color-never-forget: #aa7485;
  --color-never-forget-50: #fff1f5;
  --color-never-forget-100: #ffe3ea;
  --color-never-forget-200: #f6cad7;
  --color-never-forget-300: #e3b1c0;
  --color-never-forget-400: #c690a0;
  --color-never-forget-500: #aa7485;
  --color-never-forget-600: #8d5a6b;
  --color-never-forget-700: #734554;
  --color-never-forget-800: #5c3442;
  --color-never-forget-900: #482732;
  --color-never-forget-950: #2f171f;
  --color-lost-in-the-woods: #024330;
  --color-lost-in-the-woods-50: #defef0;
  --color-lost-in-the-woods-100: #d1f5e5;
  --color-lost-in-the-woods-200: #b8e3d0;
  --color-lost-in-the-woods-300: #9dceb9;
  --color-lost-in-the-woods-400: #7ab09a;
  --color-lost-in-the-woods-500: #5e967f;
  --color-lost-in-the-woods-600: #457c66;
  --color-lost-in-the-woods-700: #316551;
  --color-lost-in-the-woods-800: #225140;
  --color-lost-in-the-woods-900: #024330;
  --color-lost-in-the-woods-950: #0b2a1f;
  --color-gentle-glow: #f4e8bd;
  --color-gentle-glow-50: #f9f3da;
  --color-gentle-glow-100: #f4e8bd;
  --color-gentle-glow-200: #ded5b5;
  --color-gentle-glow-300: #c9bf9b;
  --color-gentle-glow-400: #aba079;
  --color-gentle-glow-500: #90855d;
  --color-gentle-glow-600: #766b45;
  --color-gentle-glow-700: #5f5532;
  --color-gentle-glow-800: #4b4223;
  --color-gentle-glow-900: #3a3318;
  --color-gentle-glow-950: #241f0c;
}