Puff of Pink to Shadow Purple Color Palette

About this palette

Puff of Pink to Shadow Purple is a 5-color cool, vintage palette: #FFD1EE (Puff of Pink), #C8A1C3 (Novel Lilac), #639777 (Paying Mantis), #39764D (Amazon), #51364F (Shadow Purple). It mixes pink, green, purple tones and feels cool overall. The strongest text pairing is #FFD1EE on #51364F with a contrast ratio of 7.84:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Puff of Pink	rgb(255, 209, 238)	hsl(322, 100%, 91%)
Novel Lilac	rgb(200, 161, 195)	hsl(308, 26%, 71%)
Paying Mantis	rgb(99, 151, 119)	hsl(143, 21%, 49%)
Amazon	rgb(57, 118, 77)	hsl(140, 35%, 34%)
Shadow Purple	rgb(81, 54, 79)	hsl(304, 20%, 26%)

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.84:1 Very good#FFD1EE on #51364F
Aa7.84:1 Very good#51364F on #FFD1EE
Aa4.69:1 Good#C8A1C3 on #51364F
Aa4.69:1 Good#51364F on #C8A1C3
Aa4.03:1 Poor#FFD1EE on #39764D
Aa4.03:1 Poor#39764D on #FFD1EE
Aa3.13:1 Poor#639777 on #51364F
Aa3.13:1 Poor#51364F on #639777

Color blindness preview

CSS variables

/* Puff of Pink to Shadow Purple — https://swatchly.xyz/palette/ffd1ee-c8a1c3-639777-39764d-51364f */
:root {
  --puff-of-pink: #ffd1ee;
  --novel-lilac: #c8a1c3;
  --paying-mantis: #639777;
  --amazon: #39764d;
  --shadow-purple: #51364f;
}

Tailwind CSS v4

/* Puff of Pink to Shadow Purple — https://swatchly.xyz/palette/ffd1ee-c8a1c3-639777-39764d-51364f */
@theme {
  --color-puff-of-pink: #ffd1ee;
  --color-puff-of-pink-50: #fffafd;
  --color-puff-of-pink-100: #ffedf8;
  --color-puff-of-pink-200: #ffd1ee;
  --color-puff-of-pink-300: #e1bcd3;
  --color-puff-of-pink-400: #c299b3;
  --color-puff-of-pink-500: #a57c96;
  --color-puff-of-pink-600: #88607a;
  --color-puff-of-pink-700: #6d4961;
  --color-puff-of-pink-800: #56374b;
  --color-puff-of-pink-900: #43293a;
  --color-puff-of-pink-950: #2b1825;
  --color-novel-lilac: #c8a1c3;
  --color-novel-lilac-50: #fff7fe;
  --color-novel-lilac-100: #ffecfc;
  --color-novel-lilac-200: #f3d7ef;
  --color-novel-lilac-300: #e1c1dd;
  --color-novel-lilac-400: #c8a1c3;
  --color-novel-lilac-500: #a983a4;
  --color-novel-lilac-600: #8b6786;
  --color-novel-lilac-700: #704f6c;
  --color-novel-lilac-800: #583b54;
  --color-novel-lilac-900: #432b41;
  --color-novel-lilac-950: #291927;
  --color-paying-mantis: #639777;
  --color-paying-mantis-50: #e1feeb;
  --color-paying-mantis-100: #d5f6e0;
  --color-paying-mantis-200: #bde4cb;
  --color-paying-mantis-300: #a3d0b3;
  --color-paying-mantis-400: #80b292;
  --color-paying-mantis-500: #639777;
  --color-paying-mantis-600: #497b5d;
  --color-paying-mantis-700: #346347;
  --color-paying-mantis-800: #244e36;
  --color-paying-mantis-900: #183c28;
  --color-paying-mantis-950: #0c2617;
  --color-amazon: #39764d;
  --color-amazon-50: #deffe6;
  --color-amazon-100: #cff6d8;
  --color-amazon-200: #b4e3c0;
  --color-amazon-300: #98cea6;
  --color-amazon-400: #73ae84;
  --color-amazon-500: #559267;
  --color-amazon-600: #39764d;
  --color-amazon-700: #285e3b;
  --color-amazon-800: #1a4b2b;
  --color-amazon-900: #103a20;
  --color-amazon-950: #072512;
  --color-shadow-purple: #51364f;
  --color-shadow-purple-50: #fff0fd;
  --color-shadow-purple-100: #f9e4f6;
  --color-shadow-purple-200: #e7cee5;
  --color-shadow-purple-300: #d2b6d0;
  --color-shadow-purple-400: #b496b1;
  --color-shadow-purple-500: #987a96;
  --color-shadow-purple-600: #7c607a;
  --color-shadow-purple-700: #644a62;
  --color-shadow-purple-800: #51364f;
  --color-shadow-purple-900: #3d2a3c;
  --color-shadow-purple-950: #261925;
}