Dark Rum to Chocolate Rush color palette

443829Dark Rum 5E4100Very Coffee 7F3A65Midnight Aubergine 150F00Balsamico 360D01Shadow Play 551707Chocolate Rush

Open in generator Export PNG, PDF, ASE…

About this palette

Dark Rum to Chocolate Rush is a 6-color dark, warm palette: #443829 (Dark Rum), #5E4100 (Very Coffee), #7F3A65 (Midnight Aubergine), #150F00 (Balsamico), #360D01 (Shadow Play), #551707 (Chocolate Rush). It mixes gray, brown, red, black tones and feels warm overall. The strongest text pairing is #7F3A65 on #150F00 with a contrast ratio of 2.45:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Rum	rgb(68, 56, 41)	hsl(33, 25%, 21%)
Very Coffee	rgb(94, 65, 0)	hsl(41, 100%, 18%)
Midnight Aubergine	rgb(127, 58, 101)	hsl(323, 37%, 36%)
Balsamico	rgb(21, 15, 0)	hsl(43, 100%, 4%)
Shadow Play	rgb(54, 13, 1)	hsl(14, 96%, 11%)
Chocolate Rush	rgb(85, 23, 7)	hsl(12, 85%, 18%)

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.

Color blindness preview

CSS variables

/* Dark Rum to Chocolate Rush — https://swatchly.xyz/palette/443829-5e4100-7f3a65-150f00-360d01-551707 */
:root {
  --dark-rum: #443829;
  --very-coffee: #5e4100;
  --midnight-aubergine: #7f3a65;
  --balsamico: #150f00;
  --shadow-play: #360d01;
  --chocolate-rush: #551707;
}

Tailwind CSS v4

/* Dark Rum to Chocolate Rush — https://swatchly.xyz/palette/443829-5e4100-7f3a65-150f00-360d01-551707 */
@theme {
  --color-dark-rum: #443829;
  --color-dark-rum-50: #fcf4e9;
  --color-dark-rum-100: #f3eade;
  --color-dark-rum-200: #e1d6c8;
  --color-dark-rum-300: #cbbfaf;
  --color-dark-rum-400: #aea190;
  --color-dark-rum-500: #948776;
  --color-dark-rum-600: #7b6e5d;
  --color-dark-rum-700: #655849;
  --color-dark-rum-800: #524739;
  --color-dark-rum-900: #443829;
  --color-dark-rum-950: #2b241b;
  --color-very-coffee: #5e4100;
  --color-very-coffee-50: #fff4e1;
  --color-very-coffee-100: #fee8c6;
  --color-very-coffee-200: #edd4ab;
  --color-very-coffee-300: #dabd8e;
  --color-very-coffee-400: #bd9e6a;
  --color-very-coffee-500: #a3834d;
  --color-very-coffee-600: #886a34;
  --color-very-coffee-700: #705421;
  --color-very-coffee-800: #5e4100;
  --color-very-coffee-900: #483208;
  --color-very-coffee-950: #2e1f02;
  --color-midnight-aubergine: #7f3a65;
  --color-midnight-aubergine-50: #fff0f8;
  --color-midnight-aubergine-100: #ffe2f1;
  --color-midnight-aubergine-200: #ffc3e5;
  --color-midnight-aubergine-300: #eda9d0;
  --color-midnight-aubergine-400: #d187b2;
  --color-midnight-aubergine-500: #b56b97;
  --color-midnight-aubergine-600: #97517c;
  --color-midnight-aubergine-700: #7f3a65;
  --color-midnight-aubergine-800: #642c4f;
  --color-midnight-aubergine-900: #4f203d;
  --color-midnight-aubergine-950: #331127;
  --color-balsamico: #150f00;
  --color-balsamico-50: #f9f5e7;
  --color-balsamico-100: #f0ebdb;
  --color-balsamico-200: #ddd7c5;
  --color-balsamico-300: #c7c1ac;
  --color-balsamico-400: #a9a18a;
  --color-balsamico-500: #8a836b;
  --color-balsamico-600: #6c654f;
  --color-balsamico-700: #524c39;
  --color-balsamico-800: #3b3627;
  --color-balsamico-900: #282418;
  --color-balsamico-950: #150f00;
  --color-shadow-play: #360d01;
  --color-shadow-play-50: #fff2ee;
  --color-shadow-play-100: #ffe5dc;
  --color-shadow-play-200: #f7cdbf;
  --color-shadow-play-300: #e4b5a5;
  --color-shadow-play-400: #c79483;
  --color-shadow-play-500: #ab7766;
  --color-shadow-play-600: #8d5d4d;
  --color-shadow-play-700: #724738;
  --color-shadow-play-800: #5a3529;
  --color-shadow-play-900: #46271d;
  --color-shadow-play-950: #360d01;
  --color-chocolate-rush: #551707;
  --color-chocolate-rush-50: #fff2ee;
  --color-chocolate-rush-100: #ffe4dd;
  --color-chocolate-rush-200: #ffc9bb;
  --color-chocolate-rush-300: #f0af9d;
  --color-chocolate-rush-400: #d38c7a;
  --color-chocolate-rush-500: #b66f5d;
  --color-chocolate-rush-600: #985544;
  --color-chocolate-rush-700: #7b3f30;
  --color-chocolate-rush-800: #622e21;
  --color-chocolate-rush-900: #551707;
  --color-chocolate-rush-950: #30120b;
}