Innocent Snowdrop to Grape Taffy Color Palette

About this palette

Innocent Snowdrop to Grape Taffy is a 5-color pastel, light, cool palette: #CECBFF (Innocent Snowdrop), #EFCEA2 (Soufflé), #ABD0E4 (Vive le Vent), #D0F4BD (Maroccan Tea), #FBD8FA (Grape Taffy). It mixes purple, orange, blue, green, pink tones and feels cool overall. The strongest text pairing is #ABD0E4 on #D0F4BD with a contrast ratio of 1.35:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Innocent Snowdrop	rgb(206, 203, 255)	hsl(243, 100%, 90%)
Soufflé	rgb(239, 206, 162)	hsl(34, 71%, 79%)
Vive le Vent	rgb(171, 208, 228)	hsl(201, 51%, 78%)
Maroccan Tea	rgb(208, 244, 189)	hsl(99, 71%, 85%)
Grape Taffy	rgb(251, 216, 250)	hsl(302, 81%, 92%)

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

/* Innocent Snowdrop to Grape Taffy — https://swatchly.xyz/palette/cecbff-efcea2-abd0e4-d0f4bd-fbd8fa */
:root {
  --innocent-snowdrop: #cecbff;
  --souffl: #efcea2;
  --vive-le-vent: #abd0e4;
  --maroccan-tea: #d0f4bd;
  --grape-taffy: #fbd8fa;
}

Tailwind CSS v4

/* Innocent Snowdrop to Grape Taffy — https://swatchly.xyz/palette/cecbff-efcea2-abd0e4-d0f4bd-fbd8fa */
@theme {
  --color-innocent-snowdrop: #cecbff;
  --color-innocent-snowdrop-50: #f0efff;
  --color-innocent-snowdrop-100: #e4e3ff;
  --color-innocent-snowdrop-200: #cecbff;
  --color-innocent-snowdrop-300: #b9b6e3;
  --color-innocent-snowdrop-400: #9b98c7;
  --color-innocent-snowdrop-500: #807dad;
  --color-innocent-snowdrop-600: #676491;
  --color-innocent-snowdrop-700: #524f77;
  --color-innocent-snowdrop-800: #403d61;
  --color-innocent-snowdrop-900: #312e4c;
  --color-innocent-snowdrop-950: #1e1c32;
  --color-souffl: #efcea2;
  --color-souffl-50: #fff0dd;
  --color-souffl-100: #fae5c8;
  --color-souffl-200: #efcea2;
  --color-souffl-300: #d5b994;
  --color-souffl-400: #b89a71;
  --color-souffl-500: #9d7f55;
  --color-souffl-600: #82653d;
  --color-souffl-700: #6a4f2a;
  --color-souffl-800: #543e1d;
  --color-souffl-900: #422f12;
  --color-souffl-950: #2a1c08;
  --color-vive-le-vent: #abd0e4;
  --color-vive-le-vent-50: #f4fbff;
  --color-vive-le-vent-100: #e2f5ff;
  --color-vive-le-vent-200: #cae4f2;
  --color-vive-le-vent-300: #abd0e4;
  --color-vive-le-vent-400: #8caec1;
  --color-vive-le-vent-500: #6e91a4;
  --color-vive-le-vent-600: #537587;
  --color-vive-le-vent-700: #3d5d6d;
  --color-vive-le-vent-800: #2c4856;
  --color-vive-le-vent-900: #1f3642;
  --color-vive-le-vent-950: #11222a;
  --color-maroccan-tea: #d0f4bd;
  --color-maroccan-tea-50: #e5f9da;
  --color-maroccan-tea-100: #d0f4bd;
  --color-maroccan-tea-200: #c3deb5;
  --color-maroccan-tea-300: #abc99b;
  --color-maroccan-tea-400: #8bab79;
  --color-maroccan-tea-500: #70905e;
  --color-maroccan-tea-600: #577645;
  --color-maroccan-tea-700: #435f32;
  --color-maroccan-tea-800: #324a24;
  --color-maroccan-tea-900: #253a19;
  --color-maroccan-tea-950: #15240c;
  --color-grape-taffy: #fbd8fa;
  --color-grape-taffy-50: #fde8fc;
  --color-grape-taffy-100: #fbd8fa;
  --color-grape-taffy-200: #e3c9e2;
  --color-grape-taffy-300: #cfb2cf;
  --color-grape-taffy-400: #b293b1;
  --color-grape-taffy-500: #987897;
  --color-grape-taffy-600: #7d5f7d;
  --color-grape-taffy-700: #664b65;
  --color-grape-taffy-800: #513950;
  --color-grape-taffy-900: #3f2b3f;
  --color-grape-taffy-950: #281928;
}