Foundation White to Purple Illusion color palette

EEECFFFoundation White C67AE9Fake Love 6A1B5APretty in Prune 8C3F9APurple Pleasures B2B9FFPurple Illusion

Open in generator Export PNG, PDF, ASE…

About this palette

Foundation White to Purple Illusion is a 5-color cool palette: #EEECFF (Foundation White), #C67AE9 (Fake Love), #6A1B5A (Pretty in Prune), #8C3F9A (Purple Pleasures), #B2B9FF (Purple Illusion). It mixes white, purple tones and feels cool overall. The strongest text pairing is #EEECFF on #6A1B5A with a contrast ratio of 9.43:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Foundation White	rgb(238, 236, 255)	hsl(246, 100%, 96%)
Fake Love	rgb(198, 122, 233)	hsl(281, 72%, 70%)
Pretty in Prune	rgb(106, 27, 90)	hsl(312, 59%, 26%)
Purple Pleasures	rgb(140, 63, 154)	hsl(291, 42%, 43%)
Purple Illusion	rgb(178, 185, 255)	hsl(235, 100%, 85%)

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.43:1 Very good#EEECFF on #6A1B5A
Aa9.43:1 Very good#6A1B5A on #EEECFF
Aa5.88:1 Good#6A1B5A on #B2B9FF
Aa5.88:1 Good#B2B9FF on #6A1B5A
Aa5.49:1 Good#EEECFF on #8C3F9A
Aa5.49:1 Good#8C3F9A on #EEECFF
Aa3.84:1 Poor#C67AE9 on #6A1B5A
Aa3.84:1 Poor#6A1B5A on #C67AE9

Color blindness preview

CSS variables

/* Foundation White to Purple Illusion — https://swatchly.xyz/palette/eeecff-c67ae9-6a1b5a-8c3f9a-b2b9ff */
:root {
  --foundation-white: #eeecff;
  --fake-love: #c67ae9;
  --pretty-in-prune: #6a1b5a;
  --purple-pleasures: #8c3f9a;
  --purple-illusion: #b2b9ff;
}

Tailwind CSS v4

/* Foundation White to Purple Illusion — https://swatchly.xyz/palette/eeecff-c67ae9-6a1b5a-8c3f9a-b2b9ff */
@theme {
  --color-foundation-white: #eeecff;
  --color-foundation-white-50: #f8f7ff;
  --color-foundation-white-100: #eeecff;
  --color-foundation-white-200: #dad8e6;
  --color-foundation-white-300: #c3c1d0;
  --color-foundation-white-400: #a3a1b2;
  --color-foundation-white-500: #878596;
  --color-foundation-white-600: #6c6a7a;
  --color-foundation-white-700: #555362;
  --color-foundation-white-800: #42414d;
  --color-foundation-white-900: #33313c;
  --color-foundation-white-950: #1f1e26;
  --color-fake-love: #c67ae9;
  --color-fake-love-50: #faf0ff;
  --color-fake-love-100: #f5e2ff;
  --color-fake-love-200: #ecc5ff;
  --color-fake-love-300: #e1a2ff;
  --color-fake-love-400: #c67ae9;
  --color-fake-love-500: #a95ecb;
  --color-fake-love-600: #8d44ad;
  --color-fake-love-700: #732f90;
  --color-fake-love-800: #5d2076;
  --color-fake-love-900: #49155e;
  --color-fake-love-950: #30093f;
  --color-pretty-in-prune: #6a1b5a;
  --color-pretty-in-prune-50: #fff0fa;
  --color-pretty-in-prune-100: #ffe1f6;
  --color-pretty-in-prune-200: #ffc1ed;
  --color-pretty-in-prune-300: #f0a4db;
  --color-pretty-in-prune-400: #d480be;
  --color-pretty-in-prune-500: #b763a2;
  --color-pretty-in-prune-600: #994986;
  --color-pretty-in-prune-700: #7d356c;
  --color-pretty-in-prune-800: #6a1b5a;
  --color-pretty-in-prune-900: #4f1943;
  --color-pretty-in-prune-950: #330d2b;
  --color-purple-pleasures: #8c3f9a;
  --color-purple-pleasures-50: #fdf0ff;
  --color-purple-pleasures-100: #fadfff;
  --color-purple-pleasures-200: #f5beff;
  --color-purple-pleasures-300: #e59ef2;
  --color-purple-pleasures-400: #c77ad5;
  --color-purple-pleasures-500: #aa5cb8;
  --color-purple-pleasures-600: #8c3f9a;
  --color-purple-pleasures-700: #712e7e;
  --color-purple-pleasures-800: #5b1f66;
  --color-purple-pleasures-900: #481551;
  --color-purple-pleasures-950: #2f0a35;
  --color-purple-illusion: #b2b9ff;
  --color-purple-illusion-50: #f2f4ff;
  --color-purple-illusion-100: #e5e9ff;
  --color-purple-illusion-200: #cdd3ff;
  --color-purple-illusion-300: #b2b9ff;
  --color-purple-illusion-400: #949adb;
  --color-purple-illusion-500: #797ec0;
  --color-purple-illusion-600: #6064a2;
  --color-purple-illusion-700: #4b4e87;
  --color-purple-illusion-800: #3a3c6d;
  --color-purple-illusion-900: #2c2e57;
  --color-purple-illusion-950: #1a1b39;
}