Eosin Pink to Hello Winter Color Palette

About this palette

Eosin Pink to Hello Winter is a 5-color light, cool, neon palette: #FF59B8 (Eosin Pink), #BD8EFF (Dream Vapour), #CBBAFF (Violet Heaven), #FFCD97 (Apricot Sherbet), #86FFE7 (Hello Winter). It mixes pink, purple, orange, turquoise tones and feels cool overall. The strongest text pairing is #FF59B8 on #86FFE7 with a contrast ratio of 2.37:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Eosin Pink	rgb(255, 89, 184)	hsl(326, 100%, 67%)
Dream Vapour	rgb(189, 142, 255)	hsl(265, 100%, 78%)
Violet Heaven	rgb(203, 186, 255)	hsl(255, 100%, 86%)
Apricot Sherbet	rgb(255, 205, 151)	hsl(31, 100%, 80%)
Hello Winter	rgb(134, 255, 231)	hsl(168, 100%, 76%)

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.

Color blindness preview

CSS variables

/* Eosin Pink to Hello Winter — https://swatchly.xyz/palette/ff59b8-bd8eff-cbbaff-ffcd97-86ffe7 */
:root {
  --eosin-pink: #ff59b8;
  --dream-vapour: #bd8eff;
  --violet-heaven: #cbbaff;
  --apricot-sherbet: #ffcd97;
  --hello-winter: #86ffe7;
}

Tailwind CSS v4

/* Eosin Pink to Hello Winter — https://swatchly.xyz/palette/ff59b8-bd8eff-cbbaff-ffcd97-86ffe7 */
@theme {
  --color-eosin-pink: #ff59b8;
  --color-eosin-pink-50: #fff1f7;
  --color-eosin-pink-100: #ffe2ef;
  --color-eosin-pink-200: #ffc4e0;
  --color-eosin-pink-300: #ff9ecf;
  --color-eosin-pink-400: #ff59b8;
  --color-eosin-pink-500: #de389c;
  --color-eosin-pink-600: #bd0d80;
  --color-eosin-pink-700: #990066;
  --color-eosin-pink-800: #790050;
  --color-eosin-pink-900: #5f003e;
  --color-eosin-pink-950: #3e0027;
  --color-dream-vapour: #bd8eff;
  --color-dream-vapour-50: #f9f6ff;
  --color-dream-vapour-100: #f2ecff;
  --color-dream-vapour-200: #e4d5ff;
  --color-dream-vapour-300: #d4b9ff;
  --color-dream-vapour-400: #bd8eff;
  --color-dream-vapour-500: #a071de;
  --color-dream-vapour-600: #8354be;
  --color-dream-vapour-700: #6a3d9f;
  --color-dream-vapour-800: #532b81;
  --color-dream-vapour-900: #401d67;
  --color-dream-vapour-950: #280f43;
  --color-violet-heaven: #cbbaff;
  --color-violet-heaven-50: #f8f7ff;
  --color-violet-heaven-100: #f0ecff;
  --color-violet-heaven-200: #dfd5ff;
  --color-violet-heaven-300: #cbbaff;
  --color-violet-heaven-400: #aa9ada;
  --color-violet-heaven-500: #8e7dbe;
  --color-violet-heaven-600: #7362a0;
  --color-violet-heaven-700: #5b4b83;
  --color-violet-heaven-800: #47396a;
  --color-violet-heaven-900: #362a53;
  --color-violet-heaven-950: #221936;
  --color-apricot-sherbet: #ffcd97;
  --color-apricot-sherbet-50: #fff3e6;
  --color-apricot-sherbet-100: #ffe7cd;
  --color-apricot-sherbet-200: #ffcd97;
  --color-apricot-sherbet-300: #e2b88b;
  --color-apricot-sherbet-400: #c59865;
  --color-apricot-sherbet-500: #aa7c48;
  --color-apricot-sherbet-600: #8d612e;
  --color-apricot-sherbet-700: #734c1b;
  --color-apricot-sherbet-800: #5c3a0c;
  --color-apricot-sherbet-900: #492b04;
  --color-apricot-sherbet-950: #2f1a01;
  --color-hello-winter: #86ffe7;
  --color-hello-winter-50: #c3fff1;
  --color-hello-winter-100: #86ffe7;
  --color-hello-winter-200: #8fe6d4;
  --color-hello-winter-300: #6dd3be;
  --color-hello-winter-400: #3ab5a0;
  --color-hello-winter-500: #009a86;
  --color-hello-winter-600: #007d6c;
  --color-hello-winter-700: #006456;
  --color-hello-winter-800: #004e43;
  --color-hello-winter-900: #003c33;
  --color-hello-winter-950: #002620;
}