Grape Taffy to Chocolate Kiss Color Palette

About this palette

Grape Taffy to Chocolate Kiss is a 4-color vintage, gradient palette: #F3DEFF (Grape Taffy), #D387BA (Pink Punk), #6F3686 (Perkin Mauve), #3B111A (Chocolate Kiss). It mixes purple, pink, brown tones and feels balanced overall. The strongest text pairing is #F3DEFF on #3B111A with a contrast ratio of 13.04:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grape Taffy	rgb(243, 222, 255)	hsl(278, 100%, 94%)
Pink Punk	rgb(211, 135, 186)	hsl(320, 46%, 68%)
Perkin Mauve	rgb(111, 54, 134)	hsl(283, 43%, 37%)
Chocolate Kiss	rgb(59, 17, 26)	hsl(347, 55%, 15%)

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.

Aa13.04:1 Super#F3DEFF on #3B111A
Aa13.04:1 Super#3B111A on #F3DEFF
Aa6.56:1 Good#F3DEFF on #6F3686
Aa6.56:1 Good#6F3686 on #F3DEFF
Aa6.20:1 Good#D387BA on #3B111A
Aa6.20:1 Good#3B111A on #D387BA
Aa3.12:1 Poor#D387BA on #6F3686
Aa3.12:1 Poor#6F3686 on #D387BA

Color blindness preview

CSS variables

/* Grape Taffy to Chocolate Kiss — https://swatchly.xyz/palette/f3deff-d387ba-6f3686-3b111a */
:root {
  --grape-taffy: #f3deff;
  --pink-punk: #d387ba;
  --perkin-mauve: #6f3686;
  --chocolate-kiss: #3b111a;
}

Tailwind CSS v4

/* Grape Taffy to Chocolate Kiss — https://swatchly.xyz/palette/f3deff-d387ba-6f3686-3b111a */
@theme {
  --color-grape-taffy: #f3deff;
  --color-grape-taffy-50: #f8edff;
  --color-grape-taffy-100: #f3deff;
  --color-grape-taffy-200: #ddcde6;
  --color-grape-taffy-300: #c8b7d2;
  --color-grape-taffy-400: #aa97b5;
  --color-grape-taffy-500: #907d9a;
  --color-grape-taffy-600: #75637f;
  --color-grape-taffy-700: #5e4e67;
  --color-grape-taffy-800: #4a3c52;
  --color-grape-taffy-900: #392d40;
  --color-grape-taffy-950: #241b29;
  --color-pink-punk: #d387ba;
  --color-pink-punk-50: #fff1fa;
  --color-pink-punk-100: #ffe3f4;
  --color-pink-punk-200: #ffc4ea;
  --color-pink-punk-300: #edabd6;
  --color-pink-punk-400: #d387ba;
  --color-pink-punk-500: #b56c9d;
  --color-pink-punk-600: #975181;
  --color-pink-punk-700: #7c3c68;
  --color-pink-punk-800: #632c53;
  --color-pink-punk-900: #4e1f40;
  --color-pink-punk-950: #321129;
  --color-perkin-mauve: #6f3686;
  --color-perkin-mauve-50: #fbf1ff;
  --color-perkin-mauve-100: #f6e3ff;
  --color-perkin-mauve-200: #edc6ff;
  --color-perkin-mauve-300: #dda9f4;
  --color-perkin-mauve-400: #bf86d8;
  --color-perkin-mauve-500: #a369bd;
  --color-perkin-mauve-600: #874e9e;
  --color-perkin-mauve-700: #6f3686;
  --color-perkin-mauve-800: #572a69;
  --color-perkin-mauve-900: #441e54;
  --color-perkin-mauve-950: #2c1037;
  --color-chocolate-kiss: #3b111a;
  --color-chocolate-kiss-50: #fff1f3;
  --color-chocolate-kiss-100: #ffe3e6;
  --color-chocolate-kiss-200: #f6cbd0;
  --color-chocolate-kiss-300: #e3b2b8;
  --color-chocolate-kiss-400: #c69198;
  --color-chocolate-kiss-500: #ab767d;
  --color-chocolate-kiss-600: #8e5d64;
  --color-chocolate-kiss-700: #75484e;
  --color-chocolate-kiss-800: #5e373d;
  --color-chocolate-kiss-900: #4b2a2f;
  --color-chocolate-kiss-950: #3b111a;
}