Black Sabbath to Coffee Adept color palette

1C001CBlack Sabbath 3C1103Black Chocolate 3D2D3EVoodoo 5D3F4DPlum Intended 7A5700Coffee Adept

About this palette

Black Sabbath to Coffee Adept is a 5-color dark, warm, gradient palette: #1C001C (Black Sabbath), #3C1103 (Black Chocolate), #3D2D3E (Voodoo), #5D3F4D (Plum Intended), #7A5700 (Coffee Adept). It mixes purple, brown, red tones and feels warm overall. The strongest text pairing is #1C001C on #7A5700 with a contrast ratio of 2.99:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Sabbath	rgb(28, 0, 28)	hsl(300, 100%, 5%)
Black Chocolate	rgb(60, 17, 3)	hsl(15, 90%, 12%)
Voodoo	rgb(61, 45, 62)	hsl(296, 16%, 21%)
Plum Intended	rgb(93, 63, 77)	hsl(332, 19%, 31%)
Coffee Adept	rgb(122, 87, 0)	hsl(43, 100%, 24%)

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

/* Black Sabbath to Coffee Adept — https://swatchly.xyz/palette/1c001c-3c1103-3d2d3e-5d3f4d-7a5700 */
:root {
  --black-sabbath: #1c001c;
  --black-chocolate: #3c1103;
  --voodoo: #3d2d3e;
  --plum-intended: #5d3f4d;
  --coffee-adept: #7a5700;
}

Tailwind CSS v4

/* Black Sabbath to Coffee Adept — https://swatchly.xyz/palette/1c001c-3c1103-3d2d3e-5d3f4d-7a5700 */
@theme {
  --color-black-sabbath: #1c001c;
  --color-black-sabbath-50: #fff0fe;
  --color-black-sabbath-100: #fde1fb;
  --color-black-sabbath-200: #eccbea;
  --color-black-sabbath-300: #d8b3d5;
  --color-black-sabbath-400: #ba92b8;
  --color-black-sabbath-500: #9b7398;
  --color-black-sabbath-600: #7a5578;
  --color-black-sabbath-700: #5d3d5c;
  --color-black-sabbath-800: #442a42;
  --color-black-sabbath-900: #2e1a2d;
  --color-black-sabbath-950: #1c001c;
  --color-black-chocolate: #3c1103;
  --color-black-chocolate-50: #fff2ee;
  --color-black-chocolate-100: #ffe5dc;
  --color-black-chocolate-200: #f8ccbe;
  --color-black-chocolate-300: #e5b4a4;
  --color-black-chocolate-400: #c89382;
  --color-black-chocolate-500: #ad7866;
  --color-black-chocolate-600: #905e4d;
  --color-black-chocolate-700: #76493a;
  --color-black-chocolate-800: #5f382b;
  --color-black-chocolate-900: #4c2a1f;
  --color-black-chocolate-950: #3c1103;
  --color-voodoo: #3d2d3e;
  --color-voodoo-50: #fcf1fd;
  --color-voodoo-100: #f3e6f4;
  --color-voodoo-200: #e1d2e2;
  --color-voodoo-300: #ccbacc;
  --color-voodoo-400: #ad9aae;
  --color-voodoo-500: #927f93;
  --color-voodoo-600: #776578;
  --color-voodoo-700: #604f60;
  --color-voodoo-800: #4b3d4c;
  --color-voodoo-900: #3d2d3e;
  --color-voodoo-950: #251c25;
  --color-plum-intended: #5d3f4d;
  --color-plum-intended-50: #fff1f7;
  --color-plum-intended-100: #fbe4ee;
  --color-plum-intended-200: #eacfdb;
  --color-plum-intended-300: #d7b8c6;
  --color-plum-intended-400: #bb99a8;
  --color-plum-intended-500: #a17f8e;
  --color-plum-intended-600: #866675;
  --color-plum-intended-700: #6f515f;
  --color-plum-intended-800: #5d3f4d;
  --color-plum-intended-900: #47313b;
  --color-plum-intended-950: #2e1e25;
  --color-coffee-adept: #7a5700;
  --color-coffee-adept-50: #fff4e0;
  --color-coffee-adept-100: #ffe8c0;
  --color-coffee-adept-200: #f2d5a3;
  --color-coffee-adept-300: #e0bf86;
  --color-coffee-adept-400: #c4a05f;
  --color-coffee-adept-500: #ab8640;
  --color-coffee-adept-600: #906d24;
  --color-coffee-adept-700: #7a5700;
  --color-coffee-adept-800: #604400;
  --color-coffee-adept-900: #4a3400;
  --color-coffee-adept-950: #302000;
}