Ficus to Grape Taffy Color Palette

About this palette

Ficus to Grape Taffy is a 5-color cool, earthy, vintage palette: #3B572C (Ficus), #8C7629 (Bay Leaf), #AA9463 (Veranda Gold), #B3D3FF (Night Snow), #FADEFD (Grape Taffy). It mixes green, yellow, blue, pink tones and feels cool overall. The strongest text pairing is #3B572C on #FADEFD with a contrast ratio of 6.55:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ficus	rgb(59, 87, 44)	hsl(99, 33%, 26%)
Bay Leaf	rgb(140, 118, 41)	hsl(47, 55%, 35%)
Veranda Gold	rgb(170, 148, 99)	hsl(41, 29%, 53%)
Night Snow	rgb(179, 211, 255)	hsl(215, 100%, 85%)
Grape Taffy	rgb(250, 222, 253)	hsl(294, 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.

Aa6.55:1 Good#3B572C on #FADEFD
Aa6.55:1 Good#FADEFD on #3B572C
Aa5.29:1 Good#3B572C on #B3D3FF
Aa5.29:1 Good#B3D3FF on #3B572C
Aa3.57:1 Poor#8C7629 on #FADEFD
Aa3.57:1 Poor#FADEFD on #8C7629

Color blindness preview

CSS variables

/* Ficus to Grape Taffy — https://swatchly.xyz/palette/3b572c-8c7629-aa9463-b3d3ff-fadefd */
:root {
  --ficus: #3b572c;
  --bay-leaf: #8c7629;
  --veranda-gold: #aa9463;
  --night-snow: #b3d3ff;
  --grape-taffy: #fadefd;
}

Tailwind CSS v4

/* Ficus to Grape Taffy — https://swatchly.xyz/palette/3b572c-8c7629-aa9463-b3d3ff-fadefd */
@theme {
  --color-ficus: #3b572c;
  --color-ficus-50: #e9fce1;
  --color-ficus-100: #def3d4;
  --color-ficus-200: #c6dfba;
  --color-ficus-300: #acc89e;
  --color-ficus-400: #8aa87b;
  --color-ficus-500: #6d8b5e;
  --color-ficus-600: #536f44;
  --color-ficus-700: #3b572c;
  --color-ficus-800: #2e4423;
  --color-ficus-900: #223418;
  --color-ficus-950: #13200c;
  --color-bay-leaf: #8c7629;
  --color-bay-leaf-50: #fff5d5;
  --color-bay-leaf-100: #fbedc1;
  --color-bay-leaf-200: #ecdca7;
  --color-bay-leaf-300: #dac78a;
  --color-bay-leaf-400: #bea964;
  --color-bay-leaf-500: #a58f45;
  --color-bay-leaf-600: #8c7629;
  --color-bay-leaf-700: #715d0d;
  --color-bay-leaf-800: #594800;
  --color-bay-leaf-900: #453700;
  --color-bay-leaf-950: #2b2100;
  --color-veranda-gold: #aa9463;
  --color-veranda-gold-50: #fdf0d3;
  --color-veranda-gold-100: #f3e4c3;
  --color-veranda-gold-200: #e0cea7;
  --color-veranda-gold-300: #c9b589;
  --color-veranda-gold-400: #aa9463;
  --color-veranda-gold-500: #907b4a;
  --color-veranda-gold-600: #766234;
  --color-veranda-gold-700: #604e23;
  --color-veranda-gold-800: #4d3d17;
  --color-veranda-gold-900: #3d2f0e;
  --color-veranda-gold-950: #281e06;
  --color-night-snow: #b3d3ff;
  --color-night-snow-50: #e7f1ff;
  --color-night-snow-100: #d5e7ff;
  --color-night-snow-200: #b3d3ff;
  --color-night-snow-300: #a2bde3;
  --color-night-snow-400: #829fc8;
  --color-night-snow-500: #6785ad;
  --color-night-snow-600: #4f6b91;
  --color-night-snow-700: #3c5578;
  --color-night-snow-800: #2d4362;
  --color-night-snow-900: #21344d;
  --color-night-snow-950: #122032;
  --color-grape-taffy: #fadefd;
  --color-grape-taffy-50: #fdedff;
  --color-grape-taffy-100: #fadefd;
  --color-grape-taffy-200: #e2cee4;
  --color-grape-taffy-300: #ceb6d0;
  --color-grape-taffy-400: #b097b2;
  --color-grape-taffy-500: #957b98;
  --color-grape-taffy-600: #7a627d;
  --color-grape-taffy-700: #624d65;
  --color-grape-taffy-800: #4e3b50;
  --color-grape-taffy-900: #3c2c3e;
  --color-grape-taffy-950: #261b27;
}