Belladonna to Plummy Color Palette

About this palette

Belladonna to Plummy is a 6-color dark, warm, gradient palette: #280118 (Belladonna), #230047 (Your Darkness), #531800 (Chocolate Rush), #68174D (Velvet), #7C341C (Caponata), #685C79 (Plummy). It mixes red, purple, brown tones and feels warm overall. The strongest text pairing is #280118 on #685C79 with a contrast ratio of 3.07:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Belladonna	rgb(40, 1, 24)	hsl(325, 95%, 8%)
Your Darkness	rgb(35, 0, 71)	hsl(270, 100%, 14%)
Chocolate Rush	rgb(83, 24, 0)	hsl(17, 100%, 16%)
Velvet	rgb(104, 23, 77)	hsl(320, 64%, 25%)
Caponata	rgb(124, 52, 28)	hsl(15, 63%, 30%)
Plummy	rgb(104, 92, 121)	hsl(265, 14%, 42%)

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.

Aa3.07:1 Poor#280118 on #685C79
Aa3.07:1 Poor#685C79 on #280118

Color blindness preview

CSS variables

/* Belladonna to Plummy — https://swatchly.xyz/palette/280118-230047-531800-68174d-7c341c-685c79 */
:root {
  --belladonna: #280118;
  --your-darkness: #230047;
  --chocolate-rush: #531800;
  --velvet: #68174d;
  --caponata: #7c341c;
  --plummy: #685c79;
}

Tailwind CSS v4

/* Belladonna to Plummy — https://swatchly.xyz/palette/280118-230047-531800-68174d-7c341c-685c79 */
@theme {
  --color-belladonna: #280118;
  --color-belladonna-50: #fff1f7;
  --color-belladonna-100: #ffe2ef;
  --color-belladonna-200: #f4c9dd;
  --color-belladonna-300: #e1b1c8;
  --color-belladonna-400: #c490a9;
  --color-belladonna-500: #a5718b;
  --color-belladonna-600: #86556d;
  --color-belladonna-700: #693e54;
  --color-belladonna-800: #4f2c3e;
  --color-belladonna-900: #391d2b;
  --color-belladonna-950: #280118;
  --color-your-darkness: #230047;
  --color-your-darkness-50: #f6f3ff;
  --color-your-darkness-100: #ede7ff;
  --color-your-darkness-200: #dccfff;
  --color-your-darkness-300: #c9b3f9;
  --color-your-darkness-400: #aa92de;
  --color-your-darkness-500: #8e74c2;
  --color-your-darkness-600: #7259a2;
  --color-your-darkness-700: #5a4385;
  --color-your-darkness-800: #453169;
  --color-your-darkness-900: #342351;
  --color-your-darkness-950: #230047;
  --color-chocolate-rush: #531800;
  --color-chocolate-rush-50: #fff2ed;
  --color-chocolate-rush-100: #ffe5db;
  --color-chocolate-rush-200: #ffcab7;
  --color-chocolate-rush-300: #efb09a;
  --color-chocolate-rush-400: #d18d75;
  --color-chocolate-rush-500: #b47058;
  --color-chocolate-rush-600: #96563f;
  --color-chocolate-rush-700: #79402b;
  --color-chocolate-rush-800: #602f1d;
  --color-chocolate-rush-900: #531800;
  --color-chocolate-rush-950: #2f1208;
  --color-velvet: #68174d;
  --color-velvet-50: #fff0f8;
  --color-velvet-100: #ffe2f1;
  --color-velvet-200: #ffc3e4;
  --color-velvet-300: #f3a3d1;
  --color-velvet-400: #d57fb2;
  --color-velvet-500: #b86195;
  --color-velvet-600: #994779;
  --color-velvet-700: #7b3260;
  --color-velvet-800: #68174d;
  --color-velvet-900: #4d183a;
  --color-velvet-950: #310c24;
  --color-caponata: #7c341c;
  --color-caponata-50: #fff2ee;
  --color-caponata-100: #ffe5dc;
  --color-caponata-200: #ffc7b5;
  --color-caponata-300: #f2a992;
  --color-caponata-400: #d4866d;
  --color-caponata-500: #b6684f;
  --color-caponata-600: #964d36;
  --color-caponata-700: #7c341c;
  --color-caponata-800: #602917;
  --color-caponata-900: #4c1e0e;
  --color-caponata-950: #311006;
  --color-plummy: #685c79;
  --color-plummy-50: #f7f3ff;
  --color-plummy-100: #ede5fa;
  --color-plummy-200: #d9cfe8;
  --color-plummy-300: #c1b6d2;
  --color-plummy-400: #a194b3;
  --color-plummy-500: #847796;
  --color-plummy-600: #685c79;
  --color-plummy-700: #534861;
  --color-plummy-800: #41384d;
  --color-plummy-900: #322b3d;
  --color-plummy-950: #1f1a27;
}