Winter Wizard to Madras Color Palette

About this palette

Winter Wizard to Madras is a 4-color warm palette: #80E5FF (Winter Wizard), #AE9B00 (Lucky), #9B396E (Royal Flush), #3D401D (Madras). It mixes blue, yellow, red, green tones and feels warm overall. The strongest text pairing is #80E5FF on #3D401D with a contrast ratio of 7.47:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Winter Wizard	rgb(128, 229, 255)	hsl(192, 100%, 75%)
Lucky	rgb(174, 155, 0)	hsl(53, 100%, 34%)
Royal Flush	rgb(155, 57, 110)	hsl(328, 46%, 42%)
Madras	rgb(61, 64, 29)	hsl(65, 38%, 18%)

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.

Aa7.47:1 Very good#80E5FF on #3D401D
Aa7.47:1 Very good#3D401D on #80E5FF
Aa4.55:1 Good#80E5FF on #9B396E
Aa4.55:1 Good#9B396E on #80E5FF
Aa3.84:1 Poor#AE9B00 on #3D401D
Aa3.84:1 Poor#3D401D on #AE9B00

Color blindness preview

CSS variables

/* Winter Wizard to Madras — https://swatchly.xyz/palette/80e5ff-ae9b00-9b396e-3d401d */
:root {
  --winter-wizard: #80e5ff;
  --lucky: #ae9b00;
  --royal-flush: #9b396e;
  --madras: #3d401d;
}

Tailwind CSS v4

/* Winter Wizard to Madras — https://swatchly.xyz/palette/80e5ff-ae9b00-9b396e-3d401d */
@theme {
  --color-winter-wizard: #80e5ff;
  --color-winter-wizard-50: #dff8ff;
  --color-winter-wizard-100: #c2f2ff;
  --color-winter-wizard-200: #80e5ff;
  --color-winter-wizard-300: #78cde3;
  --color-winter-wizard-400: #4caec6;
  --color-winter-wizard-500: #2393ac;
  --color-winter-wizard-600: #00788e;
  --color-winter-wizard-700: #005f71;
  --color-winter-wizard-800: #004b59;
  --color-winter-wizard-900: #003a46;
  --color-winter-wizard-950: #00242c;
  --color-lucky: #ae9b00;
  --color-lucky-50: #fef5b5;
  --color-lucky-100: #f4e9a1;
  --color-lucky-200: #e2d47d;
  --color-lucky-300: #ccbc54;
  --color-lucky-400: #ae9b00;
  --color-lucky-500: #918100;
  --color-lucky-600: #756800;
  --color-lucky-700: #5d5200;
  --color-lucky-800: #4a4100;
  --color-lucky-900: #393200;
  --color-lucky-950: #252000;
  --color-royal-flush: #9b396e;
  --color-royal-flush-50: #fff1f7;
  --color-royal-flush-100: #ffdfed;
  --color-royal-flush-200: #ffbedc;
  --color-royal-flush-300: #f89ac7;
  --color-royal-flush-400: #da74a7;
  --color-royal-flush-500: #bb568a;
  --color-royal-flush-600: #9b396e;
  --color-royal-flush-700: #7e2958;
  --color-royal-flush-800: #661c45;
  --color-royal-flush-900: #511236;
  --color-royal-flush-950: #350822;
  --color-madras: #3d401d;
  --color-madras-50: #f5f8e1;
  --color-madras-100: #ebeed5;
  --color-madras-200: #d7dbbd;
  --color-madras-300: #bfc4a2;
  --color-madras-400: #9fa37e;
  --color-madras-500: #838761;
  --color-madras-600: #686b48;
  --color-madras-700: #505434;
  --color-madras-800: #3d401d;
  --color-madras-900: #2e311a;
  --color-madras-950: #1c1e0d;
}