Mad Pinker to Pink Pleasure color palette

FF9394Mad Pinker 36193ANightly Voyager BB526EExtravagant Blush 6B2C72Galactic Grapevine FFDEE4Pink Pleasure

Open in generator Export PNG, PDF, ASE…

About this palette

Mad Pinker to Pink Pleasure is a 5-color warm palette: #FF9394 (Mad Pinker), #36193A (Nightly Voyager), #BB526E (Extravagant Blush), #6B2C72 (Galactic Grapevine), #FFDEE4 (Pink Pleasure). It mixes red, purple, pink tones and feels warm overall. The strongest text pairing is #36193A on #FFDEE4 with a contrast ratio of 12.40:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mad Pinker	rgb(255, 147, 148)	hsl(359, 100%, 79%)
Nightly Voyager	rgb(54, 25, 58)	hsl(293, 40%, 16%)
Extravagant Blush	rgb(187, 82, 110)	hsl(344, 44%, 53%)
Galactic Grapevine	rgb(107, 44, 114)	hsl(294, 44%, 31%)
Pink Pleasure	rgb(255, 222, 228)	hsl(349, 100%, 94%)

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.

Aa12.40:1 Super#36193A on #FFDEE4
Aa12.40:1 Super#FFDEE4 on #36193A
Aa7.55:1 Very good#6B2C72 on #FFDEE4
Aa7.55:1 Very good#FFDEE4 on #6B2C72
Aa7.26:1 Very good#FF9394 on #36193A
Aa7.26:1 Very good#36193A on #FF9394
Aa4.42:1 Poor#FF9394 on #6B2C72
Aa4.42:1 Poor#6B2C72 on #FF9394

Color blindness preview

CSS variables

/* Mad Pinker to Pink Pleasure — https://swatchly.xyz/palette/ff9394-36193a-bb526e-6b2c72-ffdee4 */
:root {
  --mad-pinker: #ff9394;
  --nightly-voyager: #36193a;
  --extravagant-blush: #bb526e;
  --galactic-grapevine: #6b2c72;
  --pink-pleasure: #ffdee4;
}

Tailwind CSS v4

/* Mad Pinker to Pink Pleasure — https://swatchly.xyz/palette/ff9394-36193a-bb526e-6b2c72-ffdee4 */
@theme {
  --color-mad-pinker: #ff9394;
  --color-mad-pinker-50: #ffeae9;
  --color-mad-pinker-100: #ffdad9;
  --color-mad-pinker-200: #ffbab9;
  --color-mad-pinker-300: #ff9394;
  --color-mad-pinker-400: #dd7778;
  --color-mad-pinker-500: #c15c5f;
  --color-mad-pinker-600: #a34448;
  --color-mad-pinker-700: #883136;
  --color-mad-pinker-800: #6f2228;
  --color-mad-pinker-900: #5a181d;
  --color-mad-pinker-950: #3b0c10;
  --color-nightly-voyager: #36193a;
  --color-nightly-voyager-50: #fdf0ff;
  --color-nightly-voyager-100: #fae2fc;
  --color-nightly-voyager-200: #e9cdec;
  --color-nightly-voyager-300: #d4b5d8;
  --color-nightly-voyager-400: #b694ba;
  --color-nightly-voyager-500: #9c7aa1;
  --color-nightly-voyager-600: #826186;
  --color-nightly-voyager-700: #6b4d6f;
  --color-nightly-voyager-800: #573c5b;
  --color-nightly-voyager-900: #472f4a;
  --color-nightly-voyager-950: #36193a;
  --color-extravagant-blush: #bb526e;
  --color-extravagant-blush-50: #ffeef1;
  --color-extravagant-blush-100: #ffdde3;
  --color-extravagant-blush-200: #ffbcc9;
  --color-extravagant-blush-300: #fa96ad;
  --color-extravagant-blush-400: #db708b;
  --color-extravagant-blush-500: #bb526e;
  --color-extravagant-blush-600: #9d3b57;
  --color-extravagant-blush-700: #822944;
  --color-extravagant-blush-800: #6a1c34;
  --color-extravagant-blush-900: #551228;
  --color-extravagant-blush-950: #390818;
  --color-galactic-grapevine: #6b2c72;
  --color-galactic-grapevine-50: #fef0ff;
  --color-galactic-grapevine-100: #fde0ff;
  --color-galactic-grapevine-200: #f7c2fc;
  --color-galactic-grapevine-300: #e6aaeb;
  --color-galactic-grapevine-400: #ca89d1;
  --color-galactic-grapevine-500: #b06eb7;
  --color-galactic-grapevine-600: #95559c;
  --color-galactic-grapevine-700: #7d4184;
  --color-galactic-grapevine-800: #6b2c72;
  --color-galactic-grapevine-900: #522357;
  --color-galactic-grapevine-950: #36133a;
  --color-pink-pleasure: #ffdee4;
  --color-pink-pleasure-50: #ffedf0;
  --color-pink-pleasure-100: #ffdee4;
  --color-pink-pleasure-200: #e6cdd2;
  --color-pink-pleasure-300: #d2b7bc;
  --color-pink-pleasure-400: #b5979d;
  --color-pink-pleasure-500: #9a7c82;
  --color-pink-pleasure-600: #7f6368;
  --color-pink-pleasure-700: #674e52;
  --color-pink-pleasure-800: #513c40;
  --color-pink-pleasure-900: #3f2d31;
  --color-pink-pleasure-950: #281b1e;
}