Pink Champagne to Darth Vader Color Palette

About this palette

Pink Champagne to Darth Vader is a 5-color muted, cool, gradient palette: #E9DCF4 (Pink Champagne), #C8A6B3 (Lily), #7F779A (Purple Haze), #5D4661 (Grape Fizz), #2E212E (Darth Vader). It mixes purple, pink, gray tones and feels cool overall. The strongest text pairing is #E9DCF4 on #2E212E with a contrast ratio of 11.66:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink Champagne	rgb(233, 220, 244)	hsl(272, 52%, 91%)
Lily	rgb(200, 166, 179)	hsl(337, 24%, 72%)
Purple Haze	rgb(127, 119, 154)	hsl(254, 15%, 54%)
Grape Fizz	rgb(93, 70, 97)	hsl(291, 16%, 33%)
Darth Vader	rgb(46, 33, 46)	hsl(300, 16%, 15%)

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.66:1 Very good#E9DCF4 on #2E212E
Aa11.66:1 Very good#2E212E on #E9DCF4
Aa6.96:1 Good#C8A6B3 on #2E212E
Aa6.96:1 Good#2E212E on #C8A6B3
Aa6.37:1 Good#E9DCF4 on #5D4661
Aa6.37:1 Good#5D4661 on #E9DCF4
Aa3.80:1 Poor#C8A6B3 on #5D4661
Aa3.80:1 Poor#5D4661 on #C8A6B3

Color blindness preview

CSS variables

/* Pink Champagne to Darth Vader — https://swatchly.xyz/palette/e9dcf4-c8a6b3-7f779a-5d4661-2e212e */
:root {
  --pink-champagne: #e9dcf4;
  --lily: #c8a6b3;
  --purple-haze: #7f779a;
  --grape-fizz: #5d4661;
  --darth-vader: #2e212e;
}

Tailwind CSS v4

/* Pink Champagne to Darth Vader — https://swatchly.xyz/palette/e9dcf4-c8a6b3-7f779a-5d4661-2e212e */
@theme {
  --color-pink-champagne: #e9dcf4;
  --color-pink-champagne-50: #f2eaf8;
  --color-pink-champagne-100: #e9dcf4;
  --color-pink-champagne-200: #d5cbde;
  --color-pink-champagne-300: #c1b6ca;
  --color-pink-champagne-400: #a498ad;
  --color-pink-champagne-500: #8a7e94;
  --color-pink-champagne-600: #70657a;
  --color-pink-champagne-700: #5b5063;
  --color-pink-champagne-800: #473e4e;
  --color-pink-champagne-900: #372f3d;
  --color-pink-champagne-950: #221d27;
  --color-lily: #c8a6b3;
  --color-lily-50: #fff9fb;
  --color-lily-100: #ffeef4;
  --color-lily-200: #f3dbe4;
  --color-lily-300: #e1c5d0;
  --color-lily-400: #c8a6b3;
  --color-lily-500: #a88895;
  --color-lily-600: #8a6b77;
  --color-lily-700: #6f535e;
  --color-lily-800: #573f48;
  --color-lily-900: #432e36;
  --color-lily-950: #291a20;
  --color-purple-haze: #7f779a;
  --color-purple-haze-50: #f4f1ff;
  --color-purple-haze-100: #e9e4fd;
  --color-purple-haze-200: #d4ceeb;
  --color-purple-haze-300: #bcb5d6;
  --color-purple-haze-400: #9c94b7;
  --color-purple-haze-500: #7f779a;
  --color-purple-haze-600: #665f7f;
  --color-purple-haze-700: #514a68;
  --color-purple-haze-800: #403a53;
  --color-purple-haze-900: #322c42;
  --color-purple-haze-950: #1f1b2b;
  --color-grape-fizz: #5d4661;
  --color-grape-fizz-50: #fdf0ff;
  --color-grape-fizz-100: #f6e5f9;
  --color-grape-fizz-200: #e3cee6;
  --color-grape-fizz-300: #cdb6d1;
  --color-grape-fizz-400: #ad94b2;
  --color-grape-fizz-500: #917895;
  --color-grape-fizz-600: #755d79;
  --color-grape-fizz-700: #5d4661;
  --color-grape-fizz-800: #48364b;
  --color-grape-fizz-900: #38293b;
  --color-grape-fizz-950: #231825;
  --color-darth-vader: #2e212e;
  --color-darth-vader-50: #fbf1fb;
  --color-darth-vader-100: #f2e7f2;
  --color-darth-vader-200: #e0d3df;
  --color-darth-vader-300: #cabbca;
  --color-darth-vader-400: #ac9cab;
  --color-darth-vader-500: #928291;
  --color-darth-vader-600: #786978;
  --color-darth-vader-700: #625462;
  --color-darth-vader-800: #4f434f;
  --color-darth-vader-900: #403540;
  --color-darth-vader-950: #2e212e;
}