Night Fever to Roses in the Snow Color Palette

About this palette

Night Fever to Roses in the Snow is a 5-color cool palette: #523489 (Night Fever), #F1DBFC (Grape Taffy), #894FA2 (Vicious Violet), #9D83DC (Perrywinkle), #E7B0CE (Roses in the Snow). It mixes purple, pink tones and feels cool overall. The strongest text pairing is #523489 on #F1DBFC with a contrast ratio of 7.36:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Night Fever	rgb(82, 52, 137)	hsl(261, 45%, 37%)
Grape Taffy	rgb(241, 219, 252)	hsl(280, 85%, 92%)
Vicious Violet	rgb(137, 79, 162)	hsl(282, 34%, 47%)
Perrywinkle	rgb(157, 131, 220)	hsl(258, 56%, 69%)
Roses in the Snow	rgb(231, 176, 206)	hsl(327, 53%, 80%)

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.36:1 Very good#523489 on #F1DBFC
Aa7.36:1 Very good#F1DBFC on #523489
Aa5.20:1 Good#523489 on #E7B0CE
Aa5.20:1 Good#E7B0CE on #523489
Aa4.40:1 Poor#F1DBFC on #894FA2
Aa4.40:1 Poor#894FA2 on #F1DBFC
Aa3.10:1 Poor#894FA2 on #E7B0CE
Aa3.10:1 Poor#E7B0CE on #894FA2

Color blindness preview

CSS variables

/* Night Fever to Roses in the Snow — https://swatchly.xyz/palette/523489-f1dbfc-894fa2-9d83dc-e7b0ce */
:root {
  --night-fever: #523489;
  --grape-taffy: #f1dbfc;
  --vicious-violet: #894fa2;
  --perrywinkle: #9d83dc;
  --roses-in-the-snow: #e7b0ce;
}

Tailwind CSS v4

/* Night Fever to Roses in the Snow — https://swatchly.xyz/palette/523489-f1dbfc-894fa2-9d83dc-e7b0ce */
@theme {
  --color-night-fever: #523489;
  --color-night-fever-50: #f6f3ff;
  --color-night-fever-100: #ede7ff;
  --color-night-fever-200: #dbcfff;
  --color-night-fever-300: #c8b5ff;
  --color-night-fever-400: #ac92ec;
  --color-night-fever-500: #9277d2;
  --color-night-fever-600: #795eb6;
  --color-night-fever-700: #63499a;
  --color-night-fever-800: #523489;
  --color-night-fever-900: #3f2968;
  --color-night-fever-950: #281846;
  --color-grape-taffy: #f1dbfc;
  --color-grape-taffy-50: #f7eafe;
  --color-grape-taffy-100: #f1dbfc;
  --color-grape-taffy-200: #dbcbe4;
  --color-grape-taffy-300: #c7b5d0;
  --color-grape-taffy-400: #aa96b4;
  --color-grape-taffy-500: #8f7b99;
  --color-grape-taffy-600: #75637f;
  --color-grape-taffy-700: #5f4e67;
  --color-grape-taffy-800: #4b3c52;
  --color-grape-taffy-900: #3a2d40;
  --color-grape-taffy-950: #241b29;
  --color-vicious-violet: #894fa2;
  --color-vicious-violet-50: #faf1ff;
  --color-vicious-violet-100: #f6e3ff;
  --color-vicious-violet-200: #edc7ff;
  --color-vicious-violet-300: #dea9f6;
  --color-vicious-violet-400: #c087da;
  --color-vicious-violet-500: #a56abf;
  --color-vicious-violet-600: #894fa2;
  --color-vicious-violet-700: #6f3b85;
  --color-vicious-violet-800: #592b6c;
  --color-vicious-violet-900: #461e56;
  --color-vicious-violet-950: #2d1038;
  --color-perrywinkle: #9d83dc;
  --color-perrywinkle-50: #f2eeff;
  --color-perrywinkle-100: #e7dfff;
  --color-perrywinkle-200: #d3c4ff;
  --color-perrywinkle-300: #bda7f9;
  --color-perrywinkle-400: #9d83dc;
  --color-perrywinkle-500: #846ac0;
  --color-perrywinkle-600: #6c52a3;
  --color-perrywinkle-700: #573f88;
  --color-perrywinkle-800: #453070;
  --color-perrywinkle-900: #37245b;
  --color-perrywinkle-950: #23153e;
  --color-roses-in-the-snow: #e7b0ce;
  --color-roses-in-the-snow-50: #fff2f9;
  --color-roses-in-the-snow-100: #ffe4f2;
  --color-roses-in-the-snow-200: #f5cbe1;
  --color-roses-in-the-snow-300: #e7b0ce;
  --color-roses-in-the-snow-400: #c491ad;
  --color-roses-in-the-snow-500: #a87592;
  --color-roses-in-the-snow-600: #8b5b76;
  --color-roses-in-the-snow-700: #71465f;
  --color-roses-in-the-snow-800: #5a344a;
  --color-roses-in-the-snow-900: #472739;
  --color-roses-in-the-snow-950: #2d1724;
}