Partial Pink to Vibrant Vine color palette

FFEBF4Partial Pink A3CEBAMint Twist 719C83Parisian Patina 5C7E6FEcological 825472Plum Highness 503441Vibrant Vine

Open in generator Export PNG, PDF, ASE…

About this palette

Partial Pink to Vibrant Vine is a 6-color muted palette: #FFEBF4 (Partial Pink), #A3CEBA (Mint Twist), #719C83 (Parisian Patina), #5C7E6F (Ecological), #825472 (Plum Highness), #503441 (Vibrant Vine). It mixes white, turquoise, green, red tones and feels cool overall. The strongest text pairing is #FFEBF4 on #503441 with a contrast ratio of 9.66:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Partial Pink	rgb(255, 235, 244)	hsl(333, 100%, 96%)
Mint Twist	rgb(163, 206, 186)	hsl(152, 30%, 72%)
Parisian Patina	rgb(113, 156, 131)	hsl(145, 18%, 53%)
Ecological	rgb(92, 126, 111)	hsl(154, 16%, 43%)
Plum Highness	rgb(130, 84, 114)	hsl(321, 21%, 42%)
Vibrant Vine	rgb(80, 52, 65)	hsl(332, 21%, 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.

Aa9.66:1 Very good#FFEBF4 on #503441
Aa9.66:1 Very good#503441 on #FFEBF4
Aa6.34:1 Good#A3CEBA on #503441
Aa6.34:1 Good#503441 on #A3CEBA
Aa5.33:1 Good#FFEBF4 on #825472
Aa5.33:1 Good#825472 on #FFEBF4
Aa3.95:1 Poor#FFEBF4 on #5C7E6F
Aa3.95:1 Poor#5C7E6F on #FFEBF4

Color blindness preview

CSS variables

/* Partial Pink to Vibrant Vine — https://swatchly.xyz/palette/ffebf4-a3ceba-719c83-5c7e6f-825472-503441 */
:root {
  --partial-pink: #ffebf4;
  --mint-twist: #a3ceba;
  --parisian-patina: #719c83;
  --ecological: #5c7e6f;
  --plum-highness: #825472;
  --vibrant-vine: #503441;
}

Tailwind CSS v4

/* Partial Pink to Vibrant Vine — https://swatchly.xyz/palette/ffebf4-a3ceba-719c83-5c7e6f-825472-503441 */
@theme {
  --color-partial-pink: #ffebf4;
  --color-partial-pink-50: #ffebf4;
  --color-partial-pink-100: #f1e4ea;
  --color-partial-pink-200: #dfd0d7;
  --color-partial-pink-300: #cabac1;
  --color-partial-pink-400: #ac9ba3;
  --color-partial-pink-500: #928088;
  --color-partial-pink-600: #77666e;
  --color-partial-pink-700: #5f5057;
  --color-partial-pink-800: #4b3e44;
  --color-partial-pink-900: #3a2f34;
  --color-partial-pink-950: #251d20;
  --color-mint-twist: #a3ceba;
  --color-mint-twist-50: #e5fdf1;
  --color-mint-twist-100: #d9f4e7;
  --color-mint-twist-200: #c2e2d2;
  --color-mint-twist-300: #a3ceba;
  --color-mint-twist-400: #85ad9b;
  --color-mint-twist-500: #69927f;
  --color-mint-twist-600: #4f7665;
  --color-mint-twist-700: #3a5f4f;
  --color-mint-twist-800: #2a4a3d;
  --color-mint-twist-900: #1e392e;
  --color-mint-twist-950: #10241c;
  --color-parisian-patina: #719c83;
  --color-parisian-patina-50: #e6feef;
  --color-parisian-patina-100: #dcf7e6;
  --color-parisian-patina-200: #c6e6d3;
  --color-parisian-patina-300: #aed2bd;
  --color-parisian-patina-400: #8db69d;
  --color-parisian-patina-500: #719c83;
  --color-parisian-patina-600: #557f67;
  --color-parisian-patina-700: #3f6550;
  --color-parisian-patina-800: #2d503d;
  --color-parisian-patina-900: #203d2d;
  --color-parisian-patina-950: #11261a;
  --color-ecological: #5c7e6f;
  --color-ecological-50: #e7fbf1;
  --color-ecological-100: #ddf3e9;
  --color-ecological-200: #c8e2d6;
  --color-ecological-300: #b0cec0;
  --color-ecological-400: #90b1a2;
  --color-ecological-500: #759788;
  --color-ecological-600: #5c7e6f;
  --color-ecological-700: #456557;
  --color-ecological-800: #334f43;
  --color-ecological-900: #253d33;
  --color-ecological-950: #15261f;
  --color-plum-highness: #825472;
  --color-plum-highness-50: #fff0f9;
  --color-plum-highness-100: #ffdff3;
  --color-plum-highness-200: #f0c7e0;
  --color-plum-highness-300: #dbadca;
  --color-plum-highness-400: #bc8baa;
  --color-plum-highness-500: #9f6f8e;
  --color-plum-highness-600: #825472;
  --color-plum-highness-700: #69415b;
  --color-plum-highness-800: #543148;
  --color-plum-highness-900: #422538;
  --color-plum-highness-950: #2a1523;
  --color-vibrant-vine: #503441;
  --color-vibrant-vine-50: #fff1f7;
  --color-vibrant-vine-100: #fbe4ee;
  --color-vibrant-vine-200: #eacfda;
  --color-vibrant-vine-300: #d4b6c3;
  --color-vibrant-vine-400: #b695a3;
  --color-vibrant-vine-500: #997987;
  --color-vibrant-vine-600: #7d5e6c;
  --color-vibrant-vine-700: #634854;
  --color-vibrant-vine-800: #503441;
  --color-vibrant-vine-900: #3c2931;
  --color-vibrant-vine-950: #25181e;
}