Enchanted Lilac to Opera color palette

A895BAEnchanted Lilac 2F2031Black Velvet 443963Storm Is Coming D0CBEDFoggy Plateau 83616DOpera

About this palette

Enchanted Lilac to Opera is a 5-color muted, cool palette: #A895BA (Enchanted Lilac), #2F2031 (Black Velvet), #443963 (Storm Is Coming), #D0CBED (Foggy Plateau), #83616D (Opera). It mixes purple, red tones and feels cool overall. The strongest text pairing is #2F2031 on #D0CBED with a contrast ratio of 9.80:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Enchanted Lilac	rgb(168, 149, 186)	hsl(271, 21%, 66%)
Black Velvet	rgb(47, 32, 49)	hsl(293, 21%, 16%)
Storm Is Coming	rgb(68, 57, 99)	hsl(256, 27%, 31%)
Foggy Plateau	rgb(208, 203, 237)	hsl(249, 49%, 86%)
Opera	rgb(131, 97, 109)	hsl(339, 15%, 45%)

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.80:1 Very good#2F2031 on #D0CBED
Aa9.80:1 Very good#D0CBED on #2F2031
Aa6.69:1 Good#443963 on #D0CBED
Aa6.69:1 Good#D0CBED on #443963
Aa5.59:1 Good#A895BA on #2F2031
Aa5.59:1 Good#2F2031 on #A895BA
Aa3.82:1 Poor#A895BA on #443963
Aa3.82:1 Poor#443963 on #A895BA

Color blindness preview

CSS variables

/* Enchanted Lilac to Opera — https://swatchly.xyz/palette/a895ba-2f2031-443963-d0cbed-83616d */
:root {
  --enchanted-lilac: #a895ba;
  --black-velvet: #2f2031;
  --storm-is-coming: #443963;
  --foggy-plateau: #d0cbed;
  --opera: #83616d;
}

Tailwind CSS v4

/* Enchanted Lilac to Opera — https://swatchly.xyz/palette/a895ba-2f2031-443963-d0cbed-83616d */
@theme {
  --color-enchanted-lilac: #a895ba;
  --color-enchanted-lilac-50: #f8f0ff;
  --color-enchanted-lilac-100: #f0e3fc;
  --color-enchanted-lilac-200: #ddceec;
  --color-enchanted-lilac-300: #c7b6d7;
  --color-enchanted-lilac-400: #a895ba;
  --color-enchanted-lilac-500: #8d7b9e;
  --color-enchanted-lilac-600: #736183;
  --color-enchanted-lilac-700: #5c4c6a;
  --color-enchanted-lilac-800: #483b55;
  --color-enchanted-lilac-900: #382d43;
  --color-enchanted-lilac-950: #241b2b;
  --color-black-velvet: #2f2031;
  --color-black-velvet-50: #fcf1fd;
  --color-black-velvet-100: #f3e6f4;
  --color-black-velvet-200: #e1d2e2;
  --color-black-velvet-300: #cbbacd;
  --color-black-velvet-400: #ad9aaf;
  --color-black-velvet-500: #938095;
  --color-black-velvet-600: #79687b;
  --color-black-velvet-700: #635365;
  --color-black-velvet-800: #504252;
  --color-black-velvet-900: #413442;
  --color-black-velvet-950: #2f2031;
  --color-storm-is-coming: #443963;
  --color-storm-is-coming-50: #f5f3ff;
  --color-storm-is-coming-100: #ece7ff;
  --color-storm-is-coming-200: #d9d1f8;
  --color-storm-is-coming-300: #c3bae5;
  --color-storm-is-coming-400: #a499c8;
  --color-storm-is-coming-500: #887dac;
  --color-storm-is-coming-600: #6e6390;
  --color-storm-is-coming-700: #574d75;
  --color-storm-is-coming-800: #443963;
  --color-storm-is-coming-900: #342c4a;
  --color-storm-is-coming-950: #201b30;
  --color-foggy-plateau: #d0cbed;
  --color-foggy-plateau-50: #f0eeff;
  --color-foggy-plateau-100: #e5e2f8;
  --color-foggy-plateau-200: #d0cbed;
  --color-foggy-plateau-300: #bbb6d4;
  --color-foggy-plateau-400: #9d98b7;
  --color-foggy-plateau-500: #837e9d;
  --color-foggy-plateau-600: #6a6582;
  --color-foggy-plateau-700: #54506b;
  --color-foggy-plateau-800: #433f56;
  --color-foggy-plateau-900: #333043;
  --color-foggy-plateau-950: #1f1d2b;
  --color-opera: #83616d;
  --color-opera-50: #fff1f5;
  --color-opera-100: #fce4ec;
  --color-opera-200: #eccfd8;
  --color-opera-300: #d8b7c2;
  --color-opera-400: #ba97a3;
  --color-opera-500: #9e7b87;
  --color-opera-600: #83616d;
  --color-opera-700: #6a4c56;
  --color-opera-800: #543a43;
  --color-opera-900: #422c34;
  --color-opera-950: #2a1a20;
}