Opium to La Vie en Rose Color Palette

About this palette

Opium to La Vie en Rose is a 5-color muted, warm, vintage palette: #A1827C (Opium), #4F3737 (Vibrant Vine), #FFE4E2 (Tutu), #815F59 (Chocolate Bliss), #D2A69F (La Vie en Rose). It mixes red, gray, white tones and feels warm overall. The strongest text pairing is #4F3737 on #FFE4E2 with a contrast ratio of 9.02:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Opium	rgb(161, 130, 124)	hsl(10, 16%, 56%)
Vibrant Vine	rgb(79, 55, 55)	hsl(0, 18%, 26%)
Tutu	rgb(255, 228, 226)	hsl(4, 100%, 94%)
Chocolate Bliss	rgb(129, 95, 89)	hsl(9, 18%, 43%)
La Vie en Rose	rgb(210, 166, 159)	hsl(8, 36%, 72%)

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.02:1 Very good#4F3737 on #FFE4E2
Aa9.02:1 Very good#FFE4E2 on #4F3737
Aa5.01:1 Good#4F3737 on #D2A69F
Aa5.01:1 Good#D2A69F on #4F3737
Aa4.70:1 Good#FFE4E2 on #815F59
Aa4.70:1 Good#815F59 on #FFE4E2
Aa3.10:1 Poor#A1827C on #4F3737
Aa3.10:1 Poor#4F3737 on #A1827C

Color blindness preview

CSS variables

/* Opium to La Vie en Rose — https://swatchly.xyz/palette/a1827c-4f3737-ffe4e2-815f59-d2a69f */
:root {
  --opium: #a1827c;
  --vibrant-vine: #4f3737;
  --tutu: #ffe4e2;
  --chocolate-bliss: #815f59;
  --la-vie-en-rose: #d2a69f;
}

Tailwind CSS v4

/* Opium to La Vie en Rose — https://swatchly.xyz/palette/a1827c-4f3737-ffe4e2-815f59-d2a69f */
@theme {
  --color-opium: #a1827c;
  --color-opium-50: #fff3f0;
  --color-opium-100: #fce7e3;
  --color-opium-200: #ecd3ce;
  --color-opium-300: #d9bdb7;
  --color-opium-400: #bc9d97;
  --color-opium-500: #a1827c;
  --color-opium-600: #846761;
  --color-opium-700: #6b504b;
  --color-opium-800: #553e39;
  --color-opium-900: #422f2b;
  --color-opium-950: #2a1c19;
  --color-vibrant-vine: #4f3737;
  --color-vibrant-vine-50: #fff1f1;
  --color-vibrant-vine-100: #f9e6e5;
  --color-vibrant-vine-200: #e8d1d1;
  --color-vibrant-vine-300: #d3b9b9;
  --color-vibrant-vine-400: #b49898;
  --color-vibrant-vine-500: #987c7c;
  --color-vibrant-vine-600: #7b6161;
  --color-vibrant-vine-700: #624b4b;
  --color-vibrant-vine-800: #4f3737;
  --color-vibrant-vine-900: #3b2b2b;
  --color-vibrant-vine-950: #251919;
  --color-tutu: #ffe4e2;
  --color-tutu-50: #fff2f1;
  --color-tutu-100: #ffe4e2;
  --color-tutu-200: #e6d2d1;
  --color-tutu-300: #d1bbb9;
  --color-tutu-400: #b39b99;
  --color-tutu-500: #98807e;
  --color-tutu-600: #7c6564;
  --color-tutu-700: #644f4e;
  --color-tutu-800: #4f3d3c;
  --color-tutu-900: #3e2f2e;
  --color-tutu-950: #271c1b;
  --color-chocolate-bliss: #815f59;
  --color-chocolate-bliss-50: #fff2ef;
  --color-chocolate-bliss-100: #fde4df;
  --color-chocolate-bliss-200: #eccfc9;
  --color-chocolate-bliss-300: #d8b6b0;
  --color-chocolate-bliss-400: #b9968f;
  --color-chocolate-bliss-500: #9d7a73;
  --color-chocolate-bliss-600: #815f59;
  --color-chocolate-bliss-700: #684a45;
  --color-chocolate-bliss-800: #533934;
  --color-chocolate-bliss-900: #412b27;
  --color-chocolate-bliss-950: #291a17;
  --color-la-vie-en-rose: #d2a69f;
  --color-la-vie-en-rose-50: #ffe7e3;
  --color-la-vie-en-rose-100: #f8d8d3;
  --color-la-vie-en-rose-200: #e6c1bb;
  --color-la-vie-en-rose-300: #d2a69f;
  --color-la-vie-en-rose-400: #b48a83;
  --color-la-vie-en-rose-500: #9a716b;
  --color-la-vie-en-rose-600: #805a54;
  --color-la-vie-en-rose-700: #694742;
  --color-la-vie-en-rose-800: #553733;
  --color-la-vie-en-rose-900: #452b27;
  --color-la-vie-en-rose-950: #2c1a17;
}