Zucchini to Pinky Pickle Color Palette

About this palette

Zucchini to Pinky Pickle is a 5-color warm palette: #004C2C (Zucchini), #9A4286 (Grape Riot), #DF89BC (Pink Punk), #70EDC4 (Jittery Jade), #B5759A (Pinky Pickle). It mixes green, pink, turquoise tones and feels warm overall. The strongest text pairing is #004C2C on #70EDC4 with a contrast ratio of 7.05:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Zucchini	rgb(0, 76, 44)	hsl(155, 100%, 15%)
Grape Riot	rgb(154, 66, 134)	hsl(314, 40%, 43%)
Pink Punk	rgb(223, 137, 188)	hsl(324, 57%, 71%)
Jittery Jade	rgb(112, 237, 196)	hsl(160, 78%, 68%)
Pinky Pickle	rgb(181, 117, 154)	hsl(325, 30%, 58%)

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.

Aa7.05:1 Very good#004C2C on #70EDC4
Aa7.05:1 Very good#70EDC4 on #004C2C
Aa4.17:1 Poor#9A4286 on #70EDC4
Aa4.17:1 Poor#70EDC4 on #9A4286
Aa4.08:1 Poor#004C2C on #DF89BC
Aa4.08:1 Poor#DF89BC on #004C2C

Color blindness preview

CSS variables

/* Zucchini to Pinky Pickle — https://swatchly.xyz/palette/004c2c-9a4286-df89bc-70edc4-b5759a */
:root {
  --zucchini: #004c2c;
  --grape-riot: #9a4286;
  --pink-punk: #df89bc;
  --jittery-jade: #70edc4;
  --pinky-pickle: #b5759a;
}

Tailwind CSS v4

/* Zucchini to Pinky Pickle — https://swatchly.xyz/palette/004c2c-9a4286-df89bc-70edc4-b5759a */
@theme {
  --color-zucchini: #004c2c;
  --color-zucchini-50: #ddffe9;
  --color-zucchini-100: #cff7dd;
  --color-zucchini-200: #b5e5c7;
  --color-zucchini-300: #98cfae;
  --color-zucchini-400: #73b08c;
  --color-zucchini-500: #559470;
  --color-zucchini-600: #3a7856;
  --color-zucchini-700: #265f41;
  --color-zucchini-800: #004c2c;
  --color-zucchini-900: #0d3923;
  --color-zucchini-950: #052414;
  --color-grape-riot: #9a4286;
  --color-grape-riot-50: #fff0fa;
  --color-grape-riot-100: #ffe0f5;
  --color-grape-riot-200: #ffbfed;
  --color-grape-riot-300: #f29fdc;
  --color-grape-riot-400: #d57bbe;
  --color-grape-riot-500: #b85ea2;
  --color-grape-riot-600: #9a4286;
  --color-grape-riot-700: #7e306c;
  --color-grape-riot-800: #652157;
  --color-grape-riot-900: #501644;
  --color-grape-riot-950: #340a2c;
  --color-pink-punk: #df89bc;
  --color-pink-punk-50: #fff4fa;
  --color-pink-punk-100: #ffe8f4;
  --color-pink-punk-200: #ffcbe8;
  --color-pink-punk-300: #f7add8;
  --color-pink-punk-400: #df89bc;
  --color-pink-punk-500: #bf6d9e;
  --color-pink-punk-600: #a05182;
  --color-pink-punk-700: #833b68;
  --color-pink-punk-800: #692a52;
  --color-pink-punk-900: #521d3f;
  --color-pink-punk-950: #350f27;
  --color-jittery-jade: #70edc4;
  --color-jittery-jade-50: #cbffeb;
  --color-jittery-jade-100: #aff9dd;
  --color-jittery-jade-200: #70edc4;
  --color-jittery-jade-300: #6bd4b0;
  --color-jittery-jade-400: #37b691;
  --color-jittery-jade-500: #009b77;
  --color-jittery-jade-600: #007d60;
  --color-jittery-jade-700: #00644c;
  --color-jittery-jade-800: #004f3b;
  --color-jittery-jade-900: #003d2d;
  --color-jittery-jade-950: #00261b;
  --color-pinky-pickle: #b5759a;
  --color-pinky-pickle-50: #fff2f9;
  --color-pinky-pickle-100: #ffe5f3;
  --color-pinky-pickle-200: #fdcae6;
  --color-pinky-pickle-300: #ebb2d1;
  --color-pinky-pickle-400: #cf91b4;
  --color-pinky-pickle-500: #b5759a;
  --color-pinky-pickle-600: #975a7e;
  --color-pinky-pickle-700: #7b4465;
  --color-pinky-pickle-800: #63324f;
  --color-pinky-pickle-900: #4d243d;
  --color-pinky-pickle-950: #321426;
}