Zucchini to Banana Mania Color Palette

About this palette

Zucchini to Banana Mania is a 5-color warm palette: #004937 (Zucchini), #0061E3 (Epic Blue), #D64D83 (Feverish Passion), #FF87B2 (Pinky), #FFE6AF (Banana Mania). It mixes turquoise, blue, pink, yellow tones and feels warm overall. The strongest text pairing is #004937 on #FFE6AF with a contrast ratio of 8.56:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Zucchini	rgb(0, 73, 55)	hsl(165, 100%, 14%)
Epic Blue	rgb(0, 97, 227)	hsl(214, 100%, 45%)
Feverish Passion	rgb(214, 77, 131)	hsl(336, 63%, 57%)
Pinky	rgb(255, 135, 178)	hsl(338, 100%, 76%)
Banana Mania	rgb(255, 230, 175)	hsl(41, 100%, 84%)

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.56:1 Very good#004937 on #FFE6AF
Aa8.56:1 Very good#FFE6AF on #004937
Aa4.66:1 Good#004937 on #FF87B2
Aa4.66:1 Good#FF87B2 on #004937
Aa4.50:1 Good#0061E3 on #FFE6AF
Aa4.50:1 Good#FFE6AF on #0061E3
Aa3.28:1 Poor#D64D83 on #FFE6AF
Aa3.28:1 Poor#FFE6AF on #D64D83

Color blindness preview

CSS variables

/* Zucchini to Banana Mania — https://swatchly.xyz/palette/004937-0061e3-d64d83-ff87b2-ffe6af */
:root {
  --zucchini: #004937;
  --epic-blue: #0061e3;
  --feverish-passion: #d64d83;
  --pinky: #ff87b2;
  --banana-mania: #ffe6af;
}

Tailwind CSS v4

/* Zucchini to Banana Mania — https://swatchly.xyz/palette/004937-0061e3-d64d83-ff87b2-ffe6af */
@theme {
  --color-zucchini: #004937;
  --color-zucchini-50: #dcfef1;
  --color-zucchini-100: #cff5e6;
  --color-zucchini-200: #b6e3d2;
  --color-zucchini-300: #99cdb9;
  --color-zucchini-400: #73ae98;
  --color-zucchini-500: #55917c;
  --color-zucchini-600: #3a7561;
  --color-zucchini-700: #265c4b;
  --color-zucchini-800: #004937;
  --color-zucchini-900: #0e372b;
  --color-zucchini-950: #052219;
  --color-epic-blue: #0061e3;
  --color-epic-blue-50: #f0f6ff;
  --color-epic-blue-100: #e0ecff;
  --color-epic-blue-200: #c1d9ff;
  --color-epic-blue-300: #9cc2ff;
  --color-epic-blue-400: #66a1ff;
  --color-epic-blue-500: #2f7fff;
  --color-epic-blue-600: #0061e3;
  --color-epic-blue-700: #004cb7;
  --color-epic-blue-800: #003b91;
  --color-epic-blue-900: #002d73;
  --color-epic-blue-950: #001b4c;
  --color-feverish-passion: #d64d83;
  --color-feverish-passion-50: #fff1f5;
  --color-feverish-passion-100: #ffe3ea;
  --color-feverish-passion-200: #ffc5d6;
  --color-feverish-passion-300: #ffa0bf;
  --color-feverish-passion-400: #f36d9e;
  --color-feverish-passion-500: #d64d83;
  --color-feverish-passion-600: #b63069;
  --color-feverish-passion-700: #971953;
  --color-feverish-passion-800: #7b0640;
  --color-feverish-passion-900: #610031;
  --color-feverish-passion-950: #40001e;
  --color-pinky: #ff87b2;
  --color-pinky-50: #ffe7ee;
  --color-pinky-100: #ffd5e1;
  --color-pinky-200: #ffb3cb;
  --color-pinky-300: #ff87b2;
  --color-pinky-400: #dd6b95;
  --color-pinky-500: #c2507c;
  --color-pinky-600: #a43864;
  --color-pinky-700: #892650;
  --color-pinky-800: #711940;
  --color-pinky-900: #5c0f32;
  --color-pinky-950: #3d051f;
  --color-banana-mania: #ffe6af;
  --color-banana-mania-50: #fff2d5;
  --color-banana-mania-100: #ffe6af;
  --color-banana-mania-200: #e6d4ab;
  --color-banana-mania-300: #d2bd8f;
  --color-banana-mania-400: #b49e6b;
  --color-banana-mania-500: #99824f;
  --color-banana-mania-600: #7e6836;
  --color-banana-mania-700: #665223;
  --color-banana-mania-800: #514015;
  --color-banana-mania-900: #3f310c;
  --color-banana-mania-950: #281e04;
}