Pink Champagne to Mystic Nights color palette

E6E0FFPink Champagne FF85EATechnolust 7D7EDEPan Purple 594AD9Warm Blue 4F1F77Mystic Nights

About this palette

Pink Champagne to Mystic Nights is a 5-color vibrant, cool, gradient palette: #E6E0FF (Pink Champagne), #FF85EA (Technolust), #7D7EDE (Pan Purple), #594AD9 (Warm Blue), #4F1F77 (Mystic Nights). It mixes purple, pink tones and feels cool overall. The strongest text pairing is #E6E0FF on #4F1F77 with a contrast ratio of 9.18:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink Champagne	rgb(230, 224, 255)	hsl(252, 100%, 94%)
Technolust	rgb(255, 133, 234)	hsl(310, 100%, 76%)
Pan Purple	rgb(125, 126, 222)	hsl(239, 60%, 68%)
Warm Blue	rgb(89, 74, 217)	hsl(246, 65%, 57%)
Mystic Nights	rgb(79, 31, 119)	hsl(273, 59%, 29%)

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.18:1 Very good#E6E0FF on #4F1F77
Aa9.18:1 Very good#4F1F77 on #E6E0FF
Aa5.46:1 Good#FF85EA on #4F1F77
Aa5.46:1 Good#4F1F77 on #FF85EA
Aa4.84:1 Good#E6E0FF on #594AD9
Aa4.84:1 Good#594AD9 on #E6E0FF
Aa3.29:1 Poor#7D7EDE on #4F1F77
Aa3.29:1 Poor#4F1F77 on #7D7EDE

Color blindness preview

CSS variables

/* Pink Champagne to Mystic Nights — https://swatchly.xyz/palette/e6e0ff-ff85ea-7d7ede-594ad9-4f1f77 */
:root {
  --pink-champagne: #e6e0ff;
  --technolust: #ff85ea;
  --pan-purple: #7d7ede;
  --warm-blue: #594ad9;
  --mystic-nights: #4f1f77;
}

Tailwind CSS v4

/* Pink Champagne to Mystic Nights — https://swatchly.xyz/palette/e6e0ff-ff85ea-7d7ede-594ad9-4f1f77 */
@theme {
  --color-pink-champagne: #e6e0ff;
  --color-pink-champagne-50: #f0edff;
  --color-pink-champagne-100: #e6e0ff;
  --color-pink-champagne-200: #d3cfe6;
  --color-pink-champagne-300: #beb9d3;
  --color-pink-champagne-400: #a09ab6;
  --color-pink-champagne-500: #85809c;
  --color-pink-champagne-600: #6c6781;
  --color-pink-champagne-700: #565169;
  --color-pink-champagne-800: #433f54;
  --color-pink-champagne-900: #343041;
  --color-pink-champagne-950: #201d2a;
  --color-technolust: #ff85ea;
  --color-technolust-50: #ffe9fa;
  --color-technolust-100: #ffd8f6;
  --color-technolust-200: #ffb4f0;
  --color-technolust-300: #ff85ea;
  --color-technolust-400: #dc68c9;
  --color-technolust-500: #c04baf;
  --color-technolust-600: #a33093;
  --color-technolust-700: #871c79;
  --color-technolust-800: #6e0c62;
  --color-technolust-900: #59024f;
  --color-technolust-950: #3a0033;
  --color-pan-purple: #7d7ede;
  --color-pan-purple-50: #f4f5ff;
  --color-pan-purple-100: #e9ebff;
  --color-pan-purple-200: #d3d6ff;
  --color-pan-purple-300: #b9beff;
  --color-pan-purple-400: #979af8;
  --color-pan-purple-500: #7d7ede;
  --color-pan-purple-600: #6362be;
  --color-pan-purple-700: #4d4b9f;
  --color-pan-purple-800: #3b3882;
  --color-pan-purple-900: #2d2968;
  --color-pan-purple-950: #1b1845;
  --color-warm-blue: #594ad9;
  --color-warm-blue-50: #f3f4ff;
  --color-warm-blue-100: #e6e8ff;
  --color-warm-blue-200: #cdd2ff;
  --color-warm-blue-300: #b2b7ff;
  --color-warm-blue-400: #8e8fff;
  --color-warm-blue-500: #7169f9;
  --color-warm-blue-600: #594ad9;
  --color-warm-blue-700: #4636b5;
  --color-warm-blue-800: #362596;
  --color-warm-blue-900: #2a1979;
  --color-warm-blue-950: #190c52;
  --color-mystic-nights: #4f1f77;
  --color-mystic-nights-50: #f8f2ff;
  --color-mystic-nights-100: #f1e6ff;
  --color-mystic-nights-200: #e3ccff;
  --color-mystic-nights-300: #d2abff;
  --color-mystic-nights-400: #b488e4;
  --color-mystic-nights-500: #976ac7;
  --color-mystic-nights-600: #7b4fa7;
  --color-mystic-nights-700: #613988;
  --color-mystic-nights-800: #4f1f77;
  --color-mystic-nights-900: #3b1d56;
  --color-mystic-nights-950: #250f38;
}