Grape Taffy to Poseidon Color Palette

About this palette

Grape Taffy to Poseidon is a 5-color cool palette: #F9D4F5 (Grape Taffy), #8DC2E3 (Sky Fall), #B49978 (Cookie Crumb), #487554 (Irish Clover), #0E4160 (Poseidon). It mixes pink, blue, orange, green tones and feels cool overall. The strongest text pairing is #F9D4F5 on #0E4160 with a contrast ratio of 8.11:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grape Taffy	rgb(249, 212, 245)	hsl(306, 76%, 90%)
Sky Fall	rgb(141, 194, 227)	hsl(203, 61%, 72%)
Cookie Crumb	rgb(180, 153, 120)	hsl(33, 29%, 59%)
Irish Clover	rgb(72, 117, 84)	hsl(136, 24%, 37%)
Poseidon	rgb(14, 65, 96)	hsl(203, 75%, 22%)

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.

Aa8.11:1 Very good#F9D4F5 on #0E4160
Aa8.11:1 Very good#0E4160 on #F9D4F5
Aa5.64:1 Good#8DC2E3 on #0E4160
Aa5.64:1 Good#0E4160 on #8DC2E3
Aa4.00:1 Poor#B49978 on #0E4160
Aa4.00:1 Poor#0E4160 on #B49978
Aa3.99:1 Poor#F9D4F5 on #487554
Aa3.99:1 Poor#487554 on #F9D4F5

Color blindness preview

CSS variables

/* Grape Taffy to Poseidon — https://swatchly.xyz/palette/f9d4f5-8dc2e3-b49978-487554-0e4160 */
:root {
  --grape-taffy: #f9d4f5;
  --sky-fall: #8dc2e3;
  --cookie-crumb: #b49978;
  --irish-clover: #487554;
  --poseidon: #0e4160;
}

Tailwind CSS v4

/* Grape Taffy to Poseidon — https://swatchly.xyz/palette/f9d4f5-8dc2e3-b49978-487554-0e4160 */
@theme {
  --color-grape-taffy: #f9d4f5;
  --color-grape-taffy-50: #fce5f9;
  --color-grape-taffy-100: #f9d4f5;
  --color-grape-taffy-200: #e2c5df;
  --color-grape-taffy-300: #cfafcb;
  --color-grape-taffy-400: #b291af;
  --color-grape-taffy-500: #987795;
  --color-grape-taffy-600: #7e5e7b;
  --color-grape-taffy-700: #674a64;
  --color-grape-taffy-800: #51394f;
  --color-grape-taffy-900: #402b3e;
  --color-grape-taffy-950: #281927;
  --color-sky-fall: #8dc2e3;
  --color-sky-fall-50: #e4f4ff;
  --color-sky-fall-100: #cdecff;
  --color-sky-fall-200: #afd8f2;
  --color-sky-fall-300: #8dc2e3;
  --color-sky-fall-400: #71a3c2;
  --color-sky-fall-500: #5689a8;
  --color-sky-fall-600: #3d6f8c;
  --color-sky-fall-700: #2b5973;
  --color-sky-fall-800: #1d465d;
  --color-sky-fall-900: #13374b;
  --color-sky-fall-950: #082230;
  --color-cookie-crumb: #b49978;
  --color-cookie-crumb-50: #fff2e2;
  --color-cookie-crumb-100: #f8e6d0;
  --color-cookie-crumb-200: #e7d1b7;
  --color-cookie-crumb-300: #d2ba9c;
  --color-cookie-crumb-400: #b49978;
  --color-cookie-crumb-500: #987e5e;
  --color-cookie-crumb-600: #7d6546;
  --color-cookie-crumb-700: #654f33;
  --color-cookie-crumb-800: #513d25;
  --color-cookie-crumb-900: #3f2f1a;
  --color-cookie-crumb-950: #291d0d;
  --color-irish-clover: #487554;
  --color-irish-clover-50: #e3fde8;
  --color-irish-clover-100: #d6f4dc;
  --color-irish-clover-200: #bde1c5;
  --color-irish-clover-300: #a2cbac;
  --color-irish-clover-400: #7fac8a;
  --color-irish-clover-500: #63906e;
  --color-irish-clover-600: #487554;
  --color-irish-clover-700: #355e40;
  --color-irish-clover-800: #264a30;
  --color-irish-clover-900: #1b3924;
  --color-irish-clover-950: #0e2415;
  --color-poseidon: #0e4160;
  --color-poseidon-50: #ecf7ff;
  --color-poseidon-100: #d9efff;
  --color-poseidon-200: #b8ddf9;
  --color-poseidon-300: #9bc6e6;
  --color-poseidon-400: #76a6c8;
  --color-poseidon-500: #5989ac;
  --color-poseidon-600: #3f6d8e;
  --color-poseidon-700: #2b5572;
  --color-poseidon-800: #0e4160;
  --color-poseidon-900: #123246;
  --color-poseidon-950: #081e2d;
}