Jigglypuff to Melancholia Color Palette

About this palette

Jigglypuff to Melancholia is a 5-color cool palette: #FEACFF (Jigglypuff), #56BE7F (Bleached Olive), #008837 (Broccoli Paradise), #66396E (Plum), #00391F (Melancholia). It mixes pink, green, purple tones and feels cool overall. The strongest text pairing is #FEACFF on #00391F with a contrast ratio of 7.82:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jigglypuff	rgb(254, 172, 255)	hsl(299, 100%, 84%)
Bleached Olive	rgb(86, 190, 127)	hsl(144, 44%, 54%)
Broccoli Paradise	rgb(0, 136, 55)	hsl(144, 100%, 27%)
Plum	rgb(102, 57, 110)	hsl(291, 32%, 33%)
Melancholia	rgb(0, 57, 31)	hsl(153, 100%, 11%)

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.82:1 Very good#FEACFF on #00391F
Aa7.82:1 Very good#00391F on #FEACFF
Aa5.65:1 Good#56BE7F on #00391F
Aa5.65:1 Good#00391F on #56BE7F
Aa5.29:1 Good#FEACFF on #66396E
Aa5.29:1 Good#66396E on #FEACFF
Aa3.82:1 Poor#56BE7F on #66396E
Aa3.82:1 Poor#66396E on #56BE7F

Color blindness preview

CSS variables

/* Jigglypuff to Melancholia — https://swatchly.xyz/palette/feacff-56be7f-008837-66396e-00391f */
:root {
  --jigglypuff: #feacff;
  --bleached-olive: #56be7f;
  --broccoli-paradise: #008837;
  --plum: #66396e;
  --melancholia: #00391f;
}

Tailwind CSS v4

/* Jigglypuff to Melancholia — https://swatchly.xyz/palette/feacff-56be7f-008837-66396e-00391f */
@theme {
  --color-jigglypuff: #feacff;
  --color-jigglypuff-50: #ffe5ff;
  --color-jigglypuff-100: #ffd2ff;
  --color-jigglypuff-200: #feacff;
  --color-jigglypuff-300: #e39ce4;
  --color-jigglypuff-400: #c77bc9;
  --color-jigglypuff-500: #ad60ae;
  --color-jigglypuff-600: #914893;
  --color-jigglypuff-700: #77357a;
  --color-jigglypuff-800: #612663;
  --color-jigglypuff-900: #4d1a4f;
  --color-jigglypuff-950: #320d33;
  --color-bleached-olive: #56be7f;
  --color-bleached-olive-50: #e3ffeb;
  --color-bleached-olive-100: #c3fed5;
  --color-bleached-olive-200: #a7eebe;
  --color-bleached-olive-300: #87daa4;
  --color-bleached-olive-400: #56be7f;
  --color-bleached-olive-500: #35a164;
  --color-bleached-olive-600: #07844a;
  --color-bleached-olive-700: #006939;
  --color-bleached-olive-800: #00522b;
  --color-bleached-olive-900: #003f20;
  --color-bleached-olive-950: #002712;
  --color-broccoli-paradise: #008837;
  --color-broccoli-paradise-50: #dfffe3;
  --color-broccoli-paradise-100: #c0ffc9;
  --color-broccoli-paradise-200: #a4efaf;
  --color-broccoli-paradise-300: #84db93;
  --color-broccoli-paradise-400: #59be6f;
  --color-broccoli-paradise-500: #34a351;
  --color-broccoli-paradise-600: #008837;
  --color-broccoli-paradise-700: #006c2a;
  --color-broccoli-paradise-800: #00551f;
  --color-broccoli-paradise-900: #004116;
  --color-broccoli-paradise-950: #00290b;
  --color-plum: #66396e;
  --color-plum-50: #fdf0ff;
  --color-plum-100: #fbe1ff;
  --color-plum-200: #edc6f4;
  --color-plum-300: #d8ace0;
  --color-plum-400: #b989c2;
  --color-plum-500: #9c6ca5;
  --color-plum-600: #7e5186;
  --color-plum-700: #66396e;
  --color-plum-800: #4f2d55;
  --color-plum-900: #3e2143;
  --color-plum-950: #27122b;
  --color-melancholia: #00391f;
  --color-melancholia-50: #e0feea;
  --color-melancholia-100: #d4f5df;
  --color-melancholia-200: #bce3c9;
  --color-melancholia-300: #a1ceb1;
  --color-melancholia-400: #7cae8f;
  --color-melancholia-500: #5f9273;
  --color-melancholia-600: #457659;
  --color-melancholia-700: #305d43;
  --color-melancholia-800: #214832;
  --color-melancholia-900: #00391f;
  --color-melancholia-950: #0a2114;
}