Passionate Plum to Puff of Pink color palette

783753Passionate Plum 4F2A15Couch 0AD6BFPristine Oceanic 0086BDForget-Me-Not FFCCE4Puff of Pink

About this palette

Passionate Plum to Puff of Pink is a 5-color warm, vintage palette: #783753 (Passionate Plum), #4F2A15 (Couch), #0AD6BF (Pristine Oceanic), #0086BD (Forget-Me-Not), #FFCCE4 (Puff of Pink). It mixes red, brown, turquoise, blue, pink tones and feels warm overall. The strongest text pairing is #4F2A15 on #FFCCE4 with a contrast ratio of 8.96:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Passionate Plum	rgb(120, 55, 83)	hsl(334, 37%, 34%)
Couch	rgb(79, 42, 21)	hsl(22, 58%, 20%)
Pristine Oceanic	rgb(10, 214, 191)	hsl(173, 91%, 44%)
Forget-Me-Not	rgb(0, 134, 189)	hsl(197, 100%, 37%)
Puff of Pink	rgb(255, 204, 228)	hsl(332, 100%, 90%)

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.

Aa8.96:1 Very good#4F2A15 on #FFCCE4
Aa8.96:1 Very good#FFCCE4 on #4F2A15
Aa6.80:1 Good#4F2A15 on #0AD6BF
Aa6.80:1 Good#0AD6BF on #4F2A15
Aa6.08:1 Good#783753 on #FFCCE4
Aa6.08:1 Good#FFCCE4 on #783753
Aa4.61:1 Good#783753 on #0AD6BF
Aa4.61:1 Good#0AD6BF on #783753

Color blindness preview

CSS variables

/* Passionate Plum to Puff of Pink — https://swatchly.xyz/palette/783753-4f2a15-0ad6bf-0086bd-ffcce4 */
:root {
  --passionate-plum: #783753;
  --couch: #4f2a15;
  --pristine-oceanic: #0ad6bf;
  --forget-me-not: #0086bd;
  --puff-of-pink: #ffcce4;
}

Tailwind CSS v4

/* Passionate Plum to Puff of Pink — https://swatchly.xyz/palette/783753-4f2a15-0ad6bf-0086bd-ffcce4 */
@theme {
  --color-passionate-plum: #783753;
  --color-passionate-plum-50: #fff1f6;
  --color-passionate-plum-100: #ffe2ec;
  --color-passionate-plum-200: #fec3d9;
  --color-passionate-plum-300: #eba9c2;
  --color-passionate-plum-400: #cd86a2;
  --color-passionate-plum-500: #b06986;
  --color-passionate-plum-600: #914f6a;
  --color-passionate-plum-700: #783753;
  --color-passionate-plum-800: #5e2b40;
  --color-passionate-plum-900: #4a1f32;
  --color-passionate-plum-950: #30111e;
  --color-couch: #4f2a15;
  --color-couch-50: #fff2ec;
  --color-couch-100: #ffe5d8;
  --color-couch-200: #f3cfbd;
  --color-couch-300: #dfb7a2;
  --color-couch-400: #c29781;
  --color-couch-500: #a77c65;
  --color-couch-600: #8b624c;
  --color-couch-700: #724d39;
  --color-couch-800: #5c3b2a;
  --color-couch-900: #4f2a15;
  --color-couch-950: #301b10;
  --color-pristine-oceanic: #0ad6bf;
  --color-pristine-oceanic-50: #c6fff4;
  --color-pristine-oceanic-100: #9efbea;
  --color-pristine-oceanic-200: #76e9d5;
  --color-pristine-oceanic-300: #0ad6bf;
  --color-pristine-oceanic-400: #00b4a0;
  --color-pristine-oceanic-500: #009686;
  --color-pristine-oceanic-600: #00796c;
  --color-pristine-oceanic-700: #006156;
  --color-pristine-oceanic-800: #004d44;
  --color-pristine-oceanic-900: #003c35;
  --color-pristine-oceanic-950: #002621;
  --color-forget-me-not: #0086bd;
  --color-forget-me-not-50: #e8f6ff;
  --color-forget-me-not-100: #cfecff;
  --color-forget-me-not-200: #a1dbff;
  --color-forget-me-not-300: #6dc5f8;
  --color-forget-me-not-400: #3ca4db;
  --color-forget-me-not-500: #0086bd;
  --color-forget-me-not-600: #006c99;
  --color-forget-me-not-700: #00567b;
  --color-forget-me-not-800: #004362;
  --color-forget-me-not-900: #00344d;
  --color-forget-me-not-950: #002133;
  --color-puff-of-pink: #ffcce4;
  --color-puff-of-pink-50: #fff6fa;
  --color-puff-of-pink-100: #ffe9f3;
  --color-puff-of-pink-200: #ffcce4;
  --color-puff-of-pink-300: #e1b8cb;
  --color-puff-of-pink-400: #c396ab;
  --color-puff-of-pink-500: #a7798f;
  --color-puff-of-pink-600: #8a5e74;
  --color-puff-of-pink-700: #6f485c;
  --color-puff-of-pink-800: #583647;
  --color-puff-of-pink-900: #452837;
  --color-puff-of-pink-950: #2c1822;
}