Grape Taffy to Wine Tasting color palette

FDD6EFGrape Taffy 52C3C0Treasured Teal 008F95Dark Cyan 8F5842Annatto 47273AWine Tasting

About this palette

Grape Taffy to Wine Tasting is a 5-color warm, vintage palette: #FDD6EF (Grape Taffy), #52C3C0 (Treasured Teal), #008F95 (Dark Cyan), #8F5842 (Annatto), #47273A (Wine Tasting). It mixes pink, turquoise, brown, red tones and feels warm overall. The strongest text pairing is #FDD6EF on #47273A with a contrast ratio of 9.91:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grape Taffy	rgb(253, 214, 239)	hsl(322, 91%, 92%)
Treasured Teal	rgb(82, 195, 192)	hsl(178, 48%, 54%)
Dark Cyan	rgb(0, 143, 149)	hsl(182, 100%, 29%)
Annatto	rgb(143, 88, 66)	hsl(17, 37%, 41%)
Wine Tasting	rgb(71, 39, 58)	hsl(324, 29%, 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.

Aa9.91:1 Very good#FDD6EF on #47273A
Aa9.91:1 Very good#47273A on #FDD6EF
Aa6.13:1 Good#52C3C0 on #47273A
Aa6.13:1 Good#47273A on #52C3C0
Aa4.40:1 Poor#FDD6EF on #8F5842
Aa4.40:1 Poor#8F5842 on #FDD6EF
Aa3.31:1 Poor#008F95 on #47273A
Aa3.31:1 Poor#47273A on #008F95

Color blindness preview

CSS variables

/* Grape Taffy to Wine Tasting — https://swatchly.xyz/palette/fdd6ef-52c3c0-008f95-8f5842-47273a */
:root {
  --grape-taffy: #fdd6ef;
  --treasured-teal: #52c3c0;
  --dark-cyan: #008f95;
  --annatto: #8f5842;
  --wine-tasting: #47273a;
}

Tailwind CSS v4

/* Grape Taffy to Wine Tasting — https://swatchly.xyz/palette/fdd6ef-52c3c0-008f95-8f5842-47273a */
@theme {
  --color-grape-taffy: #fdd6ef;
  --color-grape-taffy-50: #fee7f6;
  --color-grape-taffy-100: #fdd6ef;
  --color-grape-taffy-200: #e5c7da;
  --color-grape-taffy-300: #d2b1c6;
  --color-grape-taffy-400: #b592a8;
  --color-grape-taffy-500: #9a778e;
  --color-grape-taffy-600: #805f75;
  --color-grape-taffy-700: #684a5e;
  --color-grape-taffy-800: #53394a;
  --color-grape-taffy-900: #412b39;
  --color-grape-taffy-950: #291924;
  --color-treasured-teal: #52c3c0;
  --color-treasured-teal-50: #e9fffe;
  --color-treasured-teal-100: #c7fffc;
  --color-treasured-teal-200: #aaf0ed;
  --color-treasured-teal-300: #8adedb;
  --color-treasured-teal-400: #52c3c0;
  --color-treasured-teal-500: #2da4a1;
  --color-treasured-teal-600: #008583;
  --color-treasured-teal-700: #006967;
  --color-treasured-teal-800: #005150;
  --color-treasured-teal-900: #003d3c;
  --color-treasured-teal-950: #002525;
  --color-dark-cyan: #008f95;
  --color-dark-cyan-50: #d3fdff;
  --color-dark-cyan-100: #b5f6f9;
  --color-dark-cyan-200: #94e3e7;
  --color-dark-cyan-300: #70ccd1;
  --color-dark-cyan-400: #3eacb2;
  --color-dark-cyan-500: #008f95;
  --color-dark-cyan-600: #007378;
  --color-dark-cyan-700: #005c60;
  --color-dark-cyan-800: #00484b;
  --color-dark-cyan-900: #00383b;
  --color-dark-cyan-950: #002426;
  --color-annatto: #8f5842;
  --color-annatto-50: #fff2ed;
  --color-annatto-100: #ffe4d9;
  --color-annatto-200: #facab7;
  --color-annatto-300: #e6b19c;
  --color-annatto-400: #c98f78;
  --color-annatto-500: #ac735c;
  --color-annatto-600: #8f5842;
  --color-annatto-700: #744431;
  --color-annatto-800: #5d3322;
  --color-annatto-900: #4a2618;
  --color-annatto-950: #30160c;
  --color-wine-tasting: #47273a;
  --color-wine-tasting-50: #fff0f8;
  --color-wine-tasting-100: #fde3f1;
  --color-wine-tasting-200: #eccdde;
  --color-wine-tasting-300: #d8b5c8;
  --color-wine-tasting-400: #bb95aa;
  --color-wine-tasting-500: #9f798e;
  --color-wine-tasting-600: #835f74;
  --color-wine-tasting-700: #6a4a5c;
  --color-wine-tasting-800: #553949;
  --color-wine-tasting-900: #47273a;
  --color-wine-tasting-950: #2a1923;
}