Opium to Aubergine Color Palette

About this palette

Opium to Aubergine is a 5-color muted palette: #A47E89 (Opium), #755F68 (Chimaera), #FFEDF1 (Sugar Coated), #D5BCC2 (Shy Young Salmon), #302429 (Aubergine). It mixes pink, gray, white tones and feels warm overall. The strongest text pairing is #FFEDF1 on #302429 with a contrast ratio of 13.22:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Opium	rgb(164, 126, 137)	hsl(343, 17%, 57%)
Chimaera	rgb(117, 95, 104)	hsl(335, 10%, 42%)
Sugar Coated	rgb(255, 237, 241)	hsl(347, 100%, 96%)
Shy Young Salmon	rgb(213, 188, 194)	hsl(346, 23%, 79%)
Aubergine	rgb(48, 36, 41)	hsl(335, 14%, 16%)

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.

Aa13.22:1 Super#FFEDF1 on #302429
Aa13.22:1 Super#302429 on #FFEDF1
Aa8.37:1 Very good#D5BCC2 on #302429
Aa8.37:1 Very good#302429 on #D5BCC2
Aa5.19:1 Good#755F68 on #FFEDF1
Aa5.19:1 Good#FFEDF1 on #755F68
Aa4.20:1 Poor#A47E89 on #302429
Aa4.20:1 Poor#302429 on #A47E89

Color blindness preview

CSS variables

/* Opium to Aubergine — https://swatchly.xyz/palette/a47e89-755f68-ffedf1-d5bcc2-302429 */
:root {
  --opium: #a47e89;
  --chimaera: #755f68;
  --sugar-coated: #ffedf1;
  --shy-young-salmon: #d5bcc2;
  --aubergine: #302429;
}

Tailwind CSS v4

/* Opium to Aubergine — https://swatchly.xyz/palette/a47e89-755f68-ffedf1-d5bcc2-302429 */
@theme {
  --color-opium: #a47e89;
  --color-opium-50: #fff2f5;
  --color-opium-100: #ffe5ec;
  --color-opium-200: #efd0d9;
  --color-opium-300: #dcb9c3;
  --color-opium-400: #bf99a4;
  --color-opium-500: #a47e89;
  --color-opium-600: #87636e;
  --color-opium-700: #6e4d57;
  --color-opium-800: #573b43;
  --color-opium-900: #442c33;
  --color-opium-950: #2b1a1f;
  --color-chimaera: #755f68;
  --color-chimaera-50: #fff1f6;
  --color-chimaera-100: #f5e5eb;
  --color-chimaera-200: #e3cfd7;
  --color-chimaera-300: #cdb7c0;
  --color-chimaera-400: #ad969f;
  --color-chimaera-500: #917a83;
  --color-chimaera-600: #755f68;
  --color-chimaera-700: #5e4a52;
  --color-chimaera-800: #4a3940;
  --color-chimaera-900: #3a2c32;
  --color-chimaera-950: #241a1f;
  --color-sugar-coated: #ffedf1;
  --color-sugar-coated-50: #ffedf1;
  --color-sugar-coated-100: #f1e5e8;
  --color-sugar-coated-200: #dfd2d5;
  --color-sugar-coated-300: #cabbbe;
  --color-sugar-coated-400: #ac9c9f;
  --color-sugar-coated-500: #918185;
  --color-sugar-coated-600: #76676b;
  --color-sugar-coated-700: #5f5154;
  --color-sugar-coated-800: #4b3f41;
  --color-sugar-coated-900: #3a3032;
  --color-sugar-coated-950: #241d1f;
  --color-shy-young-salmon: #d5bcc2;
  --color-shy-young-salmon-50: #fff3f6;
  --color-shy-young-salmon-100: #f8e8ec;
  --color-shy-young-salmon-200: #e7d4d9;
  --color-shy-young-salmon-300: #d5bcc2;
  --color-shy-young-salmon-400: #b49da2;
  --color-shy-young-salmon-500: #988186;
  --color-shy-young-salmon-600: #7c666c;
  --color-shy-young-salmon-700: #645055;
  --color-shy-young-salmon-800: #4f3d42;
  --color-shy-young-salmon-900: #3d2e32;
  --color-shy-young-salmon-950: #261c1f;
  --color-aubergine: #302429;
  --color-aubergine-50: #fbf2f6;
  --color-aubergine-100: #f2e8ec;
  --color-aubergine-200: #e0d4d8;
  --color-aubergine-300: #cabdc2;
  --color-aubergine-400: #ac9da3;
  --color-aubergine-500: #928389;
  --color-aubergine-600: #796b70;
  --color-aubergine-700: #63565b;
  --color-aubergine-800: #51454a;
  --color-aubergine-900: #42373b;
  --color-aubergine-950: #302429;
}