Jigglypuff to Murasaki color palette

FFABF2Jigglypuff FF85D5Shimmering Love CF6BC5Pink Orchid A44284Grape Riot 7C246DNoble Plum 54284FMurasaki

Open in generator Export PNG, PDF, ASE…

About this palette

Jigglypuff to Murasaki is a 6-color vibrant, warm, monochromatic, gradient palette: #FFABF2 (Jigglypuff), #FF85D5 (Shimmering Love), #CF6BC5 (Pink Orchid), #A44284 (Grape Riot), #7C246D (Noble Plum), #54284F (Murasaki). It mixes pink, red, purple tones and feels warm overall. The strongest text pairing is #FFABF2 on #54284F with a contrast ratio of 6.89:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jigglypuff	rgb(255, 171, 242)	hsl(309, 100%, 84%)
Shimmering Love	rgb(255, 133, 213)	hsl(321, 100%, 76%)
Pink Orchid	rgb(207, 107, 197)	hsl(306, 51%, 62%)
Grape Riot	rgb(164, 66, 132)	hsl(320, 43%, 45%)
Noble Plum	rgb(124, 36, 109)	hsl(310, 55%, 31%)
Murasaki	rgb(84, 40, 79)	hsl(307, 35%, 24%)

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.89:1 Good#FFABF2 on #54284F
Aa6.89:1 Good#54284F on #FFABF2
Aa5.34:1 Good#FF85D5 on #54284F
Aa5.34:1 Good#54284F on #FF85D5
Aa5.30:1 Good#FFABF2 on #7C246D
Aa5.30:1 Good#7C246D on #FFABF2
Aa4.11:1 Poor#FF85D5 on #7C246D
Aa4.11:1 Poor#7C246D on #FF85D5

Color blindness preview

CSS variables

/* Jigglypuff to Murasaki — https://swatchly.xyz/palette/ffabf2-ff85d5-cf6bc5-a44284-7c246d-54284f */
:root {
  --jigglypuff: #ffabf2;
  --shimmering-love: #ff85d5;
  --pink-orchid: #cf6bc5;
  --grape-riot: #a44284;
  --noble-plum: #7c246d;
  --murasaki: #54284f;
}

Tailwind CSS v4

/* Jigglypuff to Murasaki — https://swatchly.xyz/palette/ffabf2-ff85d5-cf6bc5-a44284-7c246d-54284f */
@theme {
  --color-jigglypuff: #ffabf2;
  --color-jigglypuff-50: #fff9fe;
  --color-jigglypuff-100: #ffecfb;
  --color-jigglypuff-200: #ffd0f7;
  --color-jigglypuff-300: #ffabf2;
  --color-jigglypuff-400: #d88ccd;
  --color-jigglypuff-500: #bb6db0;
  --color-jigglypuff-600: #9c5092;
  --color-jigglypuff-700: #7f3a76;
  --color-jigglypuff-800: #65295e;
  --color-jigglypuff-900: #4e1b48;
  --color-jigglypuff-950: #330e2f;
  --color-shimmering-love: #ff85d5;
  --color-shimmering-love-50: #ffe8f5;
  --color-shimmering-love-100: #ffd6ee;
  --color-shimmering-love-200: #ffb3e2;
  --color-shimmering-love-300: #ff85d5;
  --color-shimmering-love-400: #dd69b6;
  --color-shimmering-love-500: #c14d9c;
  --color-shimmering-love-600: #a33382;
  --color-shimmering-love-700: #88206a;
  --color-shimmering-love-800: #6f1256;
  --color-shimmering-love-900: #5a0845;
  --color-shimmering-love-950: #3b022c;
  --color-pink-orchid: #cf6bc5;
  --color-pink-orchid-50: #ffeafc;
  --color-pink-orchid-100: #ffd7f9;
  --color-pink-orchid-200: #ffb1f5;
  --color-pink-orchid-300: #ed92e3;
  --color-pink-orchid-400: #cf6bc5;
  --color-pink-orchid-500: #b351aa;
  --color-pink-orchid-600: #96398f;
  --color-pink-orchid-700: #7c2675;
  --color-pink-orchid-800: #65195f;
  --color-pink-orchid-900: #510f4d;
  --color-pink-orchid-950: #370633;
  --color-grape-riot: #a44284;
  --color-grape-riot-50: #fff0f9;
  --color-grape-riot-100: #ffe2f3;
  --color-grape-riot-200: #ffc3e7;
  --color-grape-riot-300: #fa9fd8;
  --color-grape-riot-400: #de7bbb;
  --color-grape-riot-500: #c25d9f;
  --color-grape-riot-600: #a44284;
  --color-grape-riot-700: #872e6b;
  --color-grape-riot-800: #6d1f55;
  --color-grape-riot-900: #561342;
  --color-grape-riot-950: #39082a;
  --color-noble-plum: #7c246d;
  --color-noble-plum-50: #fff0fb;
  --color-noble-plum-100: #ffe1f7;
  --color-noble-plum-200: #ffbeef;
  --color-noble-plum-300: #f29ede;
  --color-noble-plum-400: #d479c0;
  --color-noble-plum-500: #b65aa3;
  --color-noble-plum-600: #964085;
  --color-noble-plum-700: #7c246d;
  --color-noble-plum-800: #601d55;
  --color-noble-plum-900: #4c1343;
  --color-noble-plum-950: #31092a;
  --color-murasaki: #54284f;
  --color-murasaki-50: #fff0fc;
  --color-murasaki-100: #ffe0fa;
  --color-murasaki-200: #f1c9eb;
  --color-murasaki-300: #dcaed5;
  --color-murasaki-400: #bd8cb6;
  --color-murasaki-500: #a06f99;
  --color-murasaki-600: #82547c;
  --color-murasaki-700: #673e62;
  --color-murasaki-800: #54284f;
  --color-murasaki-900: #3e213a;
  --color-murasaki-950: #271224;
}