Winter Wizard to Flamazing Pink color palette

9DEAFFWinter Wizard 8E7900Glazed Chestnut 35163BNightly Voyager 004E55Nocturnal Expedition F96CFFFlamazing Pink

Open in generator Export PNG, PDF, ASE…

About this palette

Winter Wizard to Flamazing Pink is a 5-color cool palette: #9DEAFF (Winter Wizard), #8E7900 (Glazed Chestnut), #35163B (Nightly Voyager), #004E55 (Nocturnal Expedition), #F96CFF (Flamazing Pink). It mixes blue, yellow, purple, turquoise, pink tones and feels cool overall. The strongest text pairing is #9DEAFF on #35163B with a contrast ratio of 11.77:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Winter Wizard	rgb(157, 234, 255)	hsl(193, 100%, 81%)
Glazed Chestnut	rgb(142, 121, 0)	hsl(51, 100%, 28%)
Nightly Voyager	rgb(53, 22, 59)	hsl(290, 46%, 16%)
Nocturnal Expedition	rgb(0, 78, 85)	hsl(185, 100%, 17%)
Flamazing Pink	rgb(249, 108, 255)	hsl(298, 100%, 71%)

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.77:1 Very good#9DEAFF on #35163B
Aa11.77:1 Very good#35163B on #9DEAFF
Aa7.05:1 Very good#9DEAFF on #004E55
Aa7.05:1 Very good#004E55 on #9DEAFF
Aa6.48:1 Good#35163B on #F96CFF
Aa6.48:1 Good#F96CFF on #35163B
Aa3.88:1 Poor#004E55 on #F96CFF
Aa3.88:1 Poor#F96CFF on #004E55

Color blindness preview

CSS variables

/* Winter Wizard to Flamazing Pink — https://swatchly.xyz/palette/9deaff-8e7900-35163b-004e55-f96cff */
:root {
  --winter-wizard: #9deaff;
  --glazed-chestnut: #8e7900;
  --nightly-voyager: #35163b;
  --nocturnal-expedition: #004e55;
  --flamazing-pink: #f96cff;
}

Tailwind CSS v4

/* Winter Wizard to Flamazing Pink — https://swatchly.xyz/palette/9deaff-8e7900-35163b-004e55-f96cff */
@theme {
  --color-winter-wizard: #9deaff;
  --color-winter-wizard-50: #edfbff;
  --color-winter-wizard-100: #d5f6ff;
  --color-winter-wizard-200: #9deaff;
  --color-winter-wizard-300: #92d0e1;
  --color-winter-wizard-400: #69b1c4;
  --color-winter-wizard-500: #4894a8;
  --color-winter-wizard-600: #2a788b;
  --color-winter-wizard-700: #126071;
  --color-winter-wizard-800: #004b5a;
  --color-winter-wizard-900: #003a46;
  --color-winter-wizard-950: #00242c;
  --color-glazed-chestnut: #8e7900;
  --color-glazed-chestnut-50: #fff4c1;
  --color-glazed-chestnut-100: #f5e8ac;
  --color-glazed-chestnut-200: #e2d18a;
  --color-glazed-chestnut-300: #cbb865;
  --color-glazed-chestnut-400: #ab9736;
  --color-glazed-chestnut-500: #8e7900;
  --color-glazed-chestnut-600: #736100;
  --color-glazed-chestnut-700: #5b4d00;
  --color-glazed-chestnut-800: #483c00;
  --color-glazed-chestnut-900: #382f00;
  --color-glazed-chestnut-950: #241d00;
  --color-nightly-voyager: #35163b;
  --color-nightly-voyager-50: #fdf0ff;
  --color-nightly-voyager-100: #fae1ff;
  --color-nightly-voyager-200: #e9ccef;
  --color-nightly-voyager-300: #d5b4db;
  --color-nightly-voyager-400: #b793be;
  --color-nightly-voyager-500: #9d78a4;
  --color-nightly-voyager-600: #825f89;
  --color-nightly-voyager-700: #6b4b71;
  --color-nightly-voyager-800: #573a5c;
  --color-nightly-voyager-900: #462d4b;
  --color-nightly-voyager-950: #35163b;
  --color-nocturnal-expedition: #004e55;
  --color-nocturnal-expedition-50: #defcff;
  --color-nocturnal-expedition-100: #cdf4f8;
  --color-nocturnal-expedition-200: #b3e1e7;
  --color-nocturnal-expedition-300: #96ccd3;
  --color-nocturnal-expedition-400: #71aeb5;
  --color-nocturnal-expedition-500: #54939a;
  --color-nocturnal-expedition-600: #39787f;
  --color-nocturnal-expedition-700: #256167;
  --color-nocturnal-expedition-800: #004e55;
  --color-nocturnal-expedition-900: #0b3b40;
  --color-nocturnal-expedition-950: #042529;
  --color-flamazing-pink: #f96cff;
  --color-flamazing-pink-50: #fff7ff;
  --color-flamazing-pink-100: #ffecff;
  --color-flamazing-pink-200: #ffcfff;
  --color-flamazing-pink-300: #fdabff;
  --color-flamazing-pink-400: #f96cff;
  --color-flamazing-pink-500: #d64bdd;
  --color-flamazing-pink-600: #b623bd;
  --color-flamazing-pink-700: #94009b;
  --color-flamazing-pink-800: #740079;
  --color-flamazing-pink-900: #59005d;
  --color-flamazing-pink-950: #38003b;
}