La Vie en Rose to Plum Intended color palette

CFAAABLa Vie en Rose 022E2BSwamp Thing C6EBE7Gentle Cold BA6E6BMorocco 623E46Plum Intended

About this palette

La Vie en Rose to Plum Intended is a 5-color muted, warm, vintage palette: #CFAAAB (La Vie en Rose), #022E2B (Swamp Thing), #C6EBE7 (Gentle Cold), #BA6E6B (Morocco), #623E46 (Plum Intended). It mixes red, turquoise tones and feels warm overall. The strongest text pairing is #022E2B on #C6EBE7 with a contrast ratio of 11.51:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
La Vie en Rose	rgb(207, 170, 171)	hsl(358, 28%, 74%)
Swamp Thing	rgb(2, 46, 43)	hsl(176, 92%, 9%)
Gentle Cold	rgb(198, 235, 231)	hsl(174, 48%, 85%)
Morocco	rgb(186, 110, 107)	hsl(2, 36%, 57%)
Plum Intended	rgb(98, 62, 70)	hsl(347, 23%, 31%)

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.

Aa11.51:1 Very good#022E2B on #C6EBE7
Aa11.51:1 Very good#C6EBE7 on #022E2B
Aa7.16:1 Very good#C6EBE7 on #623E46
Aa7.16:1 Very good#623E46 on #C6EBE7
Aa7.00:1 Good#CFAAAB on #022E2B
Aa7.00:1 Good#022E2B on #CFAAAB
Aa4.35:1 Poor#CFAAAB on #623E46
Aa4.35:1 Poor#623E46 on #CFAAAB

Color blindness preview

CSS variables

/* La Vie en Rose to Plum Intended — https://swatchly.xyz/palette/cfaaab-022e2b-c6ebe7-ba6e6b-623e46 */
:root {
  --la-vie-en-rose: #cfaaab;
  --swamp-thing: #022e2b;
  --gentle-cold: #c6ebe7;
  --morocco: #ba6e6b;
  --plum-intended: #623e46;
}

Tailwind CSS v4

/* La Vie en Rose to Plum Intended — https://swatchly.xyz/palette/cfaaab-022e2b-c6ebe7-ba6e6b-623e46 */
@theme {
  --color-la-vie-en-rose: #cfaaab;
  --color-la-vie-en-rose-50: #ffe8e9;
  --color-la-vie-en-rose-100: #f6dbdc;
  --color-la-vie-en-rose-200: #e3c4c5;
  --color-la-vie-en-rose-300: #cfaaab;
  --color-la-vie-en-rose-400: #b08d8e;
  --color-la-vie-en-rose-500: #977475;
  --color-la-vie-en-rose-600: #7d5d5e;
  --color-la-vie-en-rose-700: #66494a;
  --color-la-vie-en-rose-800: #52393a;
  --color-la-vie-en-rose-900: #422c2d;
  --color-la-vie-en-rose-950: #2a1a1b;
  --color-swamp-thing: #022e2b;
  --color-swamp-thing-50: #e3fbf8;
  --color-swamp-thing-100: #d7f2ee;
  --color-swamp-thing-200: #bfdfdb;
  --color-swamp-thing-300: #a5cac5;
  --color-swamp-thing-400: #83aba6;
  --color-swamp-thing-500: #68918d;
  --color-swamp-thing-600: #507874;
  --color-swamp-thing-700: #3c625e;
  --color-swamp-thing-800: #2e4f4c;
  --color-swamp-thing-900: #22403d;
  --color-swamp-thing-950: #022e2b;
  --color-gentle-cold: #c6ebe7;
  --color-gentle-cold-50: #ddf3f0;
  --color-gentle-cold-100: #c6ebe7;
  --color-gentle-cold-200: #bbd7d4;
  --color-gentle-cold-300: #a3c3bf;
  --color-gentle-cold-400: #83a5a2;
  --color-gentle-cold-500: #698b88;
  --color-gentle-cold-600: #51726f;
  --color-gentle-cold-700: #3e5c59;
  --color-gentle-cold-800: #2e4846;
  --color-gentle-cold-900: #213836;
  --color-gentle-cold-950: #122321;
  --color-morocco: #ba6e6b;
  --color-morocco-50: #fff2f1;
  --color-morocco-100: #ffe4e2;
  --color-morocco-200: #ffc8c5;
  --color-morocco-300: #f2aca8;
  --color-morocco-400: #d68a87;
  --color-morocco-500: #ba6e6b;
  --color-morocco-600: #9c5452;
  --color-morocco-700: #803f3e;
  --color-morocco-800: #672f2e;
  --color-morocco-900: #522221;
  --color-morocco-950: #351313;
  --color-plum-intended: #623e46;
  --color-plum-intended-50: #fff1f4;
  --color-plum-intended-100: #ffe3e8;
  --color-plum-intended-200: #efced4;
  --color-plum-intended-300: #dcb7be;
  --color-plum-intended-400: #c098a0;
  --color-plum-intended-500: #a67e86;
  --color-plum-intended-600: #8c656d;
  --color-plum-intended-700: #745058;
  --color-plum-intended-800: #623e46;
  --color-plum-intended-900: #4b3036;
  --color-plum-intended-950: #311d22;
}