Black Box to Grape Taffy color palette

03292DBlack Box 335C3CFicus A66857Hot Cacao DB93E2Somewhere in a Fairytale FDDBF5Grape Taffy

About this palette

Black Box to Grape Taffy is a 5-color cool, vintage palette: #03292D (Black Box), #335C3C (Ficus), #A66857 (Hot Cacao), #DB93E2 (Somewhere in a Fairytale), #FDDBF5 (Grape Taffy). It mixes turquoise, green, red, pink tones and feels cool overall. The strongest text pairing is #03292D on #FDDBF5 with a contrast ratio of 12.24:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Box	rgb(3, 41, 45)	hsl(186, 88%, 9%)
Ficus	rgb(51, 92, 60)	hsl(133, 29%, 28%)
Hot Cacao	rgb(166, 104, 87)	hsl(13, 31%, 50%)
Somewhere in a Fairytale	rgb(219, 147, 226)	hsl(295, 58%, 73%)
Grape Taffy	rgb(253, 219, 245)	hsl(314, 89%, 93%)

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.

Aa12.24:1 Super#03292D on #FDDBF5
Aa12.24:1 Super#FDDBF5 on #03292D
Aa6.83:1 Good#03292D on #DB93E2
Aa6.83:1 Good#DB93E2 on #03292D
Aa6.08:1 Good#335C3C on #FDDBF5
Aa6.08:1 Good#FDDBF5 on #335C3C
Aa3.51:1 Poor#A66857 on #FDDBF5
Aa3.51:1 Poor#FDDBF5 on #A66857

Color blindness preview

CSS variables

/* Black Box to Grape Taffy — https://swatchly.xyz/palette/03292d-335c3c-a66857-db93e2-fddbf5 */
:root {
  --black-box: #03292d;
  --ficus: #335c3c;
  --hot-cacao: #a66857;
  --somewhere-in-a-fairytale: #db93e2;
  --grape-taffy: #fddbf5;
}

Tailwind CSS v4

/* Black Box to Grape Taffy — https://swatchly.xyz/palette/03292d-335c3c-a66857-db93e2-fddbf5 */
@theme {
  --color-black-box: #03292d;
  --color-black-box-50: #e4fafc;
  --color-black-box-100: #d8f1f3;
  --color-black-box-200: #c1dee1;
  --color-black-box-300: #a7c8cc;
  --color-black-box-400: #85a9ad;
  --color-black-box-500: #6a8f93;
  --color-black-box-600: #517579;
  --color-black-box-700: #3d5e62;
  --color-black-box-800: #2e4b4f;
  --color-black-box-900: #223b3e;
  --color-black-box-950: #03292d;
  --color-ficus: #335c3c;
  --color-ficus-50: #e4fde8;
  --color-ficus-100: #d8f4dc;
  --color-ficus-200: #bfe1c5;
  --color-ficus-300: #a4cbab;
  --color-ficus-400: #81ac89;
  --color-ficus-500: #658f6d;
  --color-ficus-600: #4b7353;
  --color-ficus-700: #335c3c;
  --color-ficus-800: #28482e;
  --color-ficus-900: #1c3722;
  --color-ficus-950: #0f2313;
  --color-hot-cacao: #a66857;
  --color-hot-cacao-50: #ffefea;
  --color-hot-cacao-100: #ffdfd6;
  --color-hot-cacao-200: #f9c3b4;
  --color-hot-cacao-300: #e4a897;
  --color-hot-cacao-400: #c58574;
  --color-hot-cacao-500: #a66857;
  --color-hot-cacao-600: #8a5141;
  --color-hot-cacao-700: #713e30;
  --color-hot-cacao-800: #5b2f23;
  --color-hot-cacao-900: #492319;
  --color-hot-cacao-950: #30150d;
  --color-somewhere-in-a-fairytale: #db93e2;
  --color-somewhere-in-a-fairytale-50: #fde3ff;
  --color-somewhere-in-a-fairytale-100: #fbcfff;
  --color-somewhere-in-a-fairytale-200: #eeb2f3;
  --color-somewhere-in-a-fairytale-300: #db93e2;
  --color-somewhere-in-a-fairytale-400: #bc77c3;
  --color-somewhere-in-a-fairytale-500: #a25ea9;
  --color-somewhere-in-a-fairytale-600: #88478f;
  --color-somewhere-in-a-fairytale-700: #703576;
  --color-somewhere-in-a-fairytale-800: #5b2761;
  --color-somewhere-in-a-fairytale-900: #4a1d4f;
  --color-somewhere-in-a-fairytale-950: #300f33;
  --color-grape-taffy: #fddbf5;
  --color-grape-taffy-50: #ffebfa;
  --color-grape-taffy-100: #fddbf5;
  --color-grape-taffy-200: #e5cbde;
  --color-grape-taffy-300: #d1b4ca;
  --color-grape-taffy-400: #b395ac;
  --color-grape-taffy-500: #987a91;
  --color-grape-taffy-600: #7d6177;
  --color-grape-taffy-700: #664c60;
  --color-grape-taffy-800: #513a4c;
  --color-grape-taffy-900: #3f2c3b;
  --color-grape-taffy-950: #281a25;
}