Grape Taffy to Ivory Tower Color Palette

About this palette

Grape Taffy to Ivory Tower is a 5-color pastel, light, cool palette: #F5D8FF (Grape Taffy), #A9DBFF (Droplet), #E7C1B2 (Mellow Marrow), #B6CD9A (Greenhorn), #FFF3F3 (Ivory Tower). It mixes purple, blue, orange, green, white tones and feels cool overall. The strongest text pairing is #B6CD9A on #FFF3F3 with a contrast ratio of 1.59:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grape Taffy	rgb(245, 216, 255)	hsl(285, 100%, 92%)
Droplet	rgb(169, 219, 255)	hsl(205, 100%, 83%)
Mellow Marrow	rgb(231, 193, 178)	hsl(17, 52%, 80%)
Greenhorn	rgb(182, 205, 154)	hsl(87, 34%, 70%)
Ivory Tower	rgb(255, 243, 243)	hsl(0, 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

/* Grape Taffy to Ivory Tower — https://swatchly.xyz/palette/f5d8ff-a9dbff-e7c1b2-b6cd9a-fff3f3 */
:root {
  --grape-taffy: #f5d8ff;
  --droplet: #a9dbff;
  --mellow-marrow: #e7c1b2;
  --greenhorn: #b6cd9a;
  --ivory-tower: #fff3f3;
}

Tailwind CSS v4

/* Grape Taffy to Ivory Tower — https://swatchly.xyz/palette/f5d8ff-a9dbff-e7c1b2-b6cd9a-fff3f3 */
@theme {
  --color-grape-taffy: #f5d8ff;
  --color-grape-taffy-50: #f9e8ff;
  --color-grape-taffy-100: #f5d8ff;
  --color-grape-taffy-200: #dfc8e6;
  --color-grape-taffy-300: #cbb2d3;
  --color-grape-taffy-400: #ad93b6;
  --color-grape-taffy-500: #93799c;
  --color-grape-taffy-600: #796082;
  --color-grape-taffy-700: #624b6a;
  --color-grape-taffy-800: #4e3a54;
  --color-grape-taffy-900: #3c2c42;
  --color-grape-taffy-950: #261a2a;
  --color-droplet: #a9dbff;
  --color-droplet-50: #e7f5ff;
  --color-droplet-100: #d3ecff;
  --color-droplet-200: #a9dbff;
  --color-droplet-300: #9ac4e3;
  --color-droplet-400: #77a6c7;
  --color-droplet-500: #5b8bac;
  --color-droplet-600: #427090;
  --color-droplet-700: #2f5a76;
  --color-droplet-800: #21465f;
  --color-droplet-900: #16364b;
  --color-droplet-950: #0a2231;
  --color-mellow-marrow: #e7c1b2;
  --color-mellow-marrow-50: #fff8f6;
  --color-mellow-marrow-100: #ffeee7;
  --color-mellow-marrow-200: #f4d9ce;
  --color-mellow-marrow-300: #e7c1b2;
  --color-mellow-marrow-400: #c3a193;
  --color-mellow-marrow-500: #a68375;
  --color-mellow-marrow-600: #89675a;
  --color-mellow-marrow-700: #6e5044;
  --color-mellow-marrow-800: #573d32;
  --color-mellow-marrow-900: #432d24;
  --color-mellow-marrow-950: #2b1b15;
  --color-greenhorn: #b6cd9a;
  --color-greenhorn-50: #effce0;
  --color-greenhorn-100: #e4f3d4;
  --color-greenhorn-200: #d0e1bb;
  --color-greenhorn-300: #b6cd9a;
  --color-greenhorn-400: #97ac7d;
  --color-greenhorn-500: #7b9060;
  --color-greenhorn-600: #617547;
  --color-greenhorn-700: #4b5d33;
  --color-greenhorn-800: #394924;
  --color-greenhorn-900: #2b3818;
  --color-greenhorn-950: #1a230c;
  --color-ivory-tower: #fff3f3;
  --color-ivory-tower-50: #fff3f3;
  --color-ivory-tower-100: #f1eaea;
  --color-ivory-tower-200: #ded6d6;
  --color-ivory-tower-300: #c8bfbf;
  --color-ivory-tower-400: #a99f9f;
  --color-ivory-tower-500: #8e8383;
  --color-ivory-tower-600: #736969;
  --color-ivory-tower-700: #5c5353;
  --color-ivory-tower-800: #484040;
  --color-ivory-tower-900: #383131;
  --color-ivory-tower-950: #231e1e;
}