Purple Illusion to Ghost White color palette

B5B9EFPurple Illusion D5DAB2April Showers 99EADBSea Glass Teal D1EAFFVeiling Waterfalls FBF6FFGhost White

Open in generator Export PNG, PDF, ASE…

About this palette

Purple Illusion to Ghost White is a 5-color pastel, light, cool palette: #B5B9EF (Purple Illusion), #D5DAB2 (April Showers), #99EADB (Sea Glass Teal), #D1EAFF (Veiling Waterfalls), #FBF6FF (Ghost White). It mixes purple, green, turquoise, blue, white tones and feels cool overall. The strongest text pairing is #B5B9EF on #FBF6FF with a contrast ratio of 1.77:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple Illusion	rgb(181, 185, 239)	hsl(236, 64%, 82%)
April Showers	rgb(213, 218, 178)	hsl(67, 35%, 78%)
Sea Glass Teal	rgb(153, 234, 219)	hsl(169, 66%, 76%)
Veiling Waterfalls	rgb(209, 234, 255)	hsl(207, 100%, 91%)
Ghost White	rgb(251, 246, 255)	hsl(273, 100%, 98%)

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

/* Purple Illusion to Ghost White — https://swatchly.xyz/palette/b5b9ef-d5dab2-99eadb-d1eaff-fbf6ff */
:root {
  --purple-illusion: #b5b9ef;
  --april-showers: #d5dab2;
  --sea-glass-teal: #99eadb;
  --veiling-waterfalls: #d1eaff;
  --ghost-white: #fbf6ff;
}

Tailwind CSS v4

/* Purple Illusion to Ghost White — https://swatchly.xyz/palette/b5b9ef-d5dab2-99eadb-d1eaff-fbf6ff */
@theme {
  --color-purple-illusion: #b5b9ef;
  --color-purple-illusion-50: #f1f3ff;
  --color-purple-illusion-100: #e5e7ff;
  --color-purple-illusion-200: #ced1fb;
  --color-purple-illusion-300: #b5b9ef;
  --color-purple-illusion-400: #979acd;
  --color-purple-illusion-500: #7c7fb2;
  --color-purple-illusion-600: #636595;
  --color-purple-illusion-700: #4e507b;
  --color-purple-illusion-800: #3c3e63;
  --color-purple-illusion-900: #2e2f4f;
  --color-purple-illusion-950: #1c1c33;
  --color-april-showers: #d5dab2;
  --color-april-showers-50: #f3f6e0;
  --color-april-showers-100: #e9ecd3;
  --color-april-showers-200: #d5dab2;
  --color-april-showers-300: #bfc3a1;
  --color-april-showers-400: #a0a47f;
  --color-april-showers-500: #858964;
  --color-april-showers-600: #6b6f4b;
  --color-april-showers-700: #555838;
  --color-april-showers-800: #424529;
  --color-april-showers-900: #33351d;
  --color-april-showers-950: #1f210f;
  --color-sea-glass-teal: #99eadb;
  --color-sea-glass-teal-50: #d8fff7;
  --color-sea-glass-teal-100: #c7f7ed;
  --color-sea-glass-teal-200: #99eadb;
  --color-sea-glass-teal-300: #8ed0c4;
  --color-sea-glass-teal-400: #66b2a5;
  --color-sea-glass-teal-500: #459789;
  --color-sea-glass-teal-600: #287b6f;
  --color-sea-glass-teal-700: #106358;
  --color-sea-glass-teal-800: #004e45;
  --color-sea-glass-teal-900: #003c35;
  --color-sea-glass-teal-950: #002621;
  --color-veiling-waterfalls: #d1eaff;
  --color-veiling-waterfalls-50: #e5f3ff;
  --color-veiling-waterfalls-100: #d1eaff;
  --color-veiling-waterfalls-200: #c4d6e6;
  --color-veiling-waterfalls-300: #acc1d2;
  --color-veiling-waterfalls-400: #8ca2b5;
  --color-veiling-waterfalls-500: #71889b;
  --color-veiling-waterfalls-600: #586e80;
  --color-veiling-waterfalls-700: #445868;
  --color-veiling-waterfalls-800: #334553;
  --color-veiling-waterfalls-900: #263541;
  --color-veiling-waterfalls-950: #162129;
  --color-ghost-white: #fbf6ff;
  --color-ghost-white-50: #fbf6ff;
  --color-ghost-white-100: #efecf2;
  --color-ghost-white-200: #dbd8de;
  --color-ghost-white-300: #c5c0c8;
  --color-ghost-white-400: #a5a0a8;
  --color-ghost-white-500: #89858d;
  --color-ghost-white-600: #6e6a71;
  --color-ghost-white-700: #57535a;
  --color-ghost-white-800: #444147;
  --color-ghost-white-900: #343237;
  --color-ghost-white-950: #201e22;
}