Black Sabbath to Kabul Color Palette

About this palette

Black Sabbath to Kabul is a 5-color dark, cool, gradient palette: #1D001E (Black Sabbath), #400030 (Dark Sanctuary), #452E44 (Voodoo), #53387A (Kingfisher Daisy), #715956 (Kabul). It mixes purple, red, gray tones and feels cool overall. The strongest text pairing is #1D001E on #715956 with a contrast ratio of 3.05:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Sabbath	rgb(29, 0, 30)	hsl(298, 100%, 6%)
Dark Sanctuary	rgb(64, 0, 48)	hsl(315, 100%, 13%)
Voodoo	rgb(69, 46, 68)	hsl(303, 20%, 23%)
Kingfisher Daisy	rgb(83, 56, 122)	hsl(265, 37%, 35%)
Kabul	rgb(113, 89, 86)	hsl(7, 14%, 39%)

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.05:1 Poor#1D001E on #715956
Aa3.05:1 Poor#715956 on #1D001E

Color blindness preview

CSS variables

/* Black Sabbath to Kabul — https://swatchly.xyz/palette/1d001e-400030-452e44-53387a-715956 */
:root {
  --black-sabbath: #1d001e;
  --dark-sanctuary: #400030;
  --voodoo: #452e44;
  --kingfisher-daisy: #53387a;
  --kabul: #715956;
}

Tailwind CSS v4

/* Black Sabbath to Kabul — https://swatchly.xyz/palette/1d001e-400030-452e44-53387a-715956 */
@theme {
  --color-black-sabbath: #1d001e;
  --color-black-sabbath-50: #ffeffe;
  --color-black-sabbath-100: #fde1fc;
  --color-black-sabbath-200: #eccbeb;
  --color-black-sabbath-300: #d8b3d7;
  --color-black-sabbath-400: #ba92b9;
  --color-black-sabbath-500: #9b729a;
  --color-black-sabbath-600: #7b557a;
  --color-black-sabbath-700: #5e3d5e;
  --color-black-sabbath-800: #442a44;
  --color-black-sabbath-900: #2f1b2e;
  --color-black-sabbath-950: #1d001e;
  --color-dark-sanctuary: #400030;
  --color-dark-sanctuary-50: #fff0f9;
  --color-dark-sanctuary-100: #ffe1f3;
  --color-dark-sanctuary-200: #fdc3e7;
  --color-dark-sanctuary-300: #ebaad2;
  --color-dark-sanctuary-400: #ce87b4;
  --color-dark-sanctuary-500: #b26c99;
  --color-dark-sanctuary-600: #96527e;
  --color-dark-sanctuary-700: #7b3e67;
  --color-dark-sanctuary-800: #642e52;
  --color-dark-sanctuary-900: #502241;
  --color-dark-sanctuary-950: #400030;
  --color-voodoo: #452e44;
  --color-voodoo-50: #fff0fe;
  --color-voodoo-100: #f7e4f6;
  --color-voodoo-200: #e5d0e4;
  --color-voodoo-300: #d0b8cf;
  --color-voodoo-400: #b398b1;
  --color-voodoo-500: #997e97;
  --color-voodoo-600: #7e657d;
  --color-voodoo-700: #674f66;
  --color-voodoo-800: #533e52;
  --color-voodoo-900: #452e44;
  --color-voodoo-950: #2b1e2a;
  --color-kingfisher-daisy: #53387a;
  --color-kingfisher-daisy-50: #f7f3ff;
  --color-kingfisher-daisy-100: #eee7ff;
  --color-kingfisher-daisy-200: #deceff;
  --color-kingfisher-daisy-300: #ccb5f6;
  --color-kingfisher-daisy-400: #ae95dc;
  --color-kingfisher-daisy-500: #957ac2;
  --color-kingfisher-daisy-600: #7b60a6;
  --color-kingfisher-daisy-700: #654c8c;
  --color-kingfisher-daisy-800: #53387a;
  --color-kingfisher-daisy-900: #3f2c5d;
  --color-kingfisher-daisy-950: #291a3e;
  --color-kabul: #715956;
  --color-kabul-50: #fff2f0;
  --color-kabul-100: #f8e6e4;
  --color-kabul-200: #e9d4d1;
  --color-kabul-300: #d6bfbc;
  --color-kabul-400: #baa09d;
  --color-kabul-500: #a08783;
  --color-kabul-600: #876e6b;
  --color-kabul-700: #715956;
  --color-kabul-800: #594542;
  --color-kabul-900: #463432;
  --color-kabul-950: #2d201f;
}