Wine Stain to Lavender Bliss Color Palette

About this palette

Wine Stain to Lavender Bliss is a 5-color muted, cool, vintage, gradient palette: #6A4559 (Wine Stain), #826379 (Opera), #9B829A (Hatoba Pigeon), #B3A2BC (Pastel Purple), #CCC3E0 (Lavender Bliss). It mixes red, pink, purple tones and feels cool overall. The strongest text pairing is #6A4559 on #CCC3E0 with a contrast ratio of 4.77:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wine Stain	rgb(106, 69, 89)	hsl(328, 21%, 34%)
Opera	rgb(130, 99, 121)	hsl(317, 14%, 45%)
Hatoba Pigeon	rgb(155, 130, 154)	hsl(302, 11%, 56%)
Pastel Purple	rgb(179, 162, 188)	hsl(279, 16%, 69%)
Lavender Bliss	rgb(204, 195, 224)	hsl(259, 32%, 82%)

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.

Aa4.77:1 Good#6A4559 on #CCC3E0
Aa4.77:1 Good#CCC3E0 on #6A4559
Aa3.38:1 Poor#6A4559 on #B3A2BC
Aa3.38:1 Poor#B3A2BC on #6A4559
Aa3.10:1 Poor#826379 on #CCC3E0
Aa3.10:1 Poor#CCC3E0 on #826379

Color blindness preview

CSS variables

/* Wine Stain to Lavender Bliss — https://swatchly.xyz/palette/6a4559-826379-9b829a-b3a2bc-ccc3e0 */
:root {
  --wine-stain: #6a4559;
  --opera: #826379;
  --hatoba-pigeon: #9b829a;
  --pastel-purple: #b3a2bc;
  --lavender-bliss: #ccc3e0;
}

Tailwind CSS v4

/* Wine Stain to Lavender Bliss — https://swatchly.xyz/palette/6a4559-826379-9b829a-b3a2bc-ccc3e0 */
@theme {
  --color-wine-stain: #6a4559;
  --color-wine-stain-50: #fff0f8;
  --color-wine-stain-100: #fee2f0;
  --color-wine-stain-200: #edccdd;
  --color-wine-stain-300: #d9b3c6;
  --color-wine-stain-400: #bb92a7;
  --color-wine-stain-500: #9f768b;
  --color-wine-stain-600: #825c70;
  --color-wine-stain-700: #6a4559;
  --color-wine-stain-800: #533545;
  --color-wine-stain-900: #412835;
  --color-wine-stain-950: #291821;
  --color-opera: #826379;
  --color-opera-50: #fff0fa;
  --color-opera-100: #fae4f3;
  --color-opera-200: #eacfe1;
  --color-opera-300: #d6b8cc;
  --color-opera-400: #b898ae;
  --color-opera-500: #9d7d93;
  --color-opera-600: #826379;
  --color-opera-700: #694d61;
  --color-opera-800: #533b4c;
  --color-opera-900: #412c3b;
  --color-opera-950: #291a25;
  --color-hatoba-pigeon: #9b829a;
  --color-hatoba-pigeon-50: #fff1fe;
  --color-hatoba-pigeon-100: #f8e7f7;
  --color-hatoba-pigeon-200: #e7d3e6;
  --color-hatoba-pigeon-300: #d3bcd2;
  --color-hatoba-pigeon-400: #b59db4;
  --color-hatoba-pigeon-500: #9b829a;
  --color-hatoba-pigeon-600: #7f677e;
  --color-hatoba-pigeon-700: #665065;
  --color-hatoba-pigeon-800: #503d50;
  --color-hatoba-pigeon-900: #3e2e3d;
  --color-hatoba-pigeon-950: #271c26;
  --color-pastel-purple: #b3a2bc;
  --color-pastel-purple-50: #fcf5ff;
  --color-pastel-purple-100: #f5ebfb;
  --color-pastel-purple-200: #e4d8eb;
  --color-pastel-purple-300: #d0c1d8;
  --color-pastel-purple-400: #b3a2bc;
  --color-pastel-purple-500: #96859e;
  --color-pastel-purple-600: #7a6a82;
  --color-pastel-purple-700: #615268;
  --color-pastel-purple-800: #4c3f52;
  --color-pastel-purple-900: #3a2f3f;
  --color-pastel-purple-950: #231c27;
  --color-lavender-bliss: #ccc3e0;
  --color-lavender-bliss-50: #faf8ff;
  --color-lavender-bliss-100: #f2edff;
  --color-lavender-bliss-200: #e0daef;
  --color-lavender-bliss-300: #ccc3e0;
  --color-lavender-bliss-400: #aba3bd;
  --color-lavender-bliss-500: #8e86a1;
  --color-lavender-bliss-600: #726a84;
  --color-lavender-bliss-700: #5a536a;
  --color-lavender-bliss-800: #463f54;
  --color-lavender-bliss-900: #352f40;
  --color-lavender-bliss-950: #211d29;
}