Black Sabbath to Rusty Heart Color Palette

About this palette

Black Sabbath to Rusty Heart is a 5-color dark, warm palette: #1F001D (Black Sabbath), #410024 (Dark Sanctuary), #3A2B73 (Her Highness), #78361A (Walnut), #9D4238 (Rusty Heart). It mixes purple, red, brown tones and feels warm overall. The strongest text pairing is #1F001D on #9D4238 with a contrast ratio of 3.04:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Sabbath	rgb(31, 0, 29)	hsl(304, 100%, 6%)
Dark Sanctuary	rgb(65, 0, 36)	hsl(327, 100%, 13%)
Her Highness	rgb(58, 43, 115)	hsl(252, 46%, 31%)
Walnut	rgb(120, 54, 26)	hsl(18, 64%, 29%)
Rusty Heart	rgb(157, 66, 56)	hsl(6, 47%, 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.04:1 Poor#1F001D on #9D4238
Aa3.04:1 Poor#9D4238 on #1F001D

Color blindness preview

CSS variables

/* Black Sabbath to Rusty Heart — https://swatchly.xyz/palette/1f001d-410024-3a2b73-78361a-9d4238 */
:root {
  --black-sabbath: #1f001d;
  --dark-sanctuary: #410024;
  --her-highness: #3a2b73;
  --walnut: #78361a;
  --rusty-heart: #9d4238;
}

Tailwind CSS v4

/* Black Sabbath to Rusty Heart — https://swatchly.xyz/palette/1f001d-410024-3a2b73-78361a-9d4238 */
@theme {
  --color-black-sabbath: #1f001d;
  --color-black-sabbath-50: #fff0fd;
  --color-black-sabbath-100: #fee0fa;
  --color-black-sabbath-200: #eecbe9;
  --color-black-sabbath-300: #dab2d4;
  --color-black-sabbath-400: #bc91b7;
  --color-black-sabbath-500: #9d7297;
  --color-black-sabbath-600: #7d5578;
  --color-black-sabbath-700: #603d5c;
  --color-black-sabbath-800: #462a43;
  --color-black-sabbath-900: #301b2e;
  --color-black-sabbath-950: #1f001d;
  --color-dark-sanctuary: #410024;
  --color-dark-sanctuary-50: #fff1f6;
  --color-dark-sanctuary-100: #ffe2ed;
  --color-dark-sanctuary-200: #ffc4db;
  --color-dark-sanctuary-300: #eeaac5;
  --color-dark-sanctuary-400: #d188a6;
  --color-dark-sanctuary-500: #b66c8b;
  --color-dark-sanctuary-600: #985270;
  --color-dark-sanctuary-700: #7d3e5a;
  --color-dark-sanctuary-800: #652e47;
  --color-dark-sanctuary-900: #512137;
  --color-dark-sanctuary-950: #410024;
  --color-her-highness: #3a2b73;
  --color-her-highness-50: #f4f4ff;
  --color-her-highness-100: #eae8ff;
  --color-her-highness-200: #d5d2ff;
  --color-her-highness-300: #beb7ff;
  --color-her-highness-400: #a097e6;
  --color-her-highness-500: #867ccc;
  --color-her-highness-600: #6e63b0;
  --color-her-highness-700: #594e95;
  --color-her-highness-800: #483d7d;
  --color-her-highness-900: #3a2b73;
  --color-her-highness-950: #241d46;
  --color-walnut: #78361a;
  --color-walnut-50: #fff2ed;
  --color-walnut-100: #ffe5db;
  --color-walnut-200: #ffc7b2;
  --color-walnut-300: #eeab91;
  --color-walnut-400: #d0886b;
  --color-walnut-500: #b26a4e;
  --color-walnut-600: #924f34;
  --color-walnut-700: #78361a;
  --color-walnut-800: #5d2b16;
  --color-walnut-900: #491f0d;
  --color-walnut-950: #2f1105;
  --color-rusty-heart: #9d4238;
  --color-rusty-heart-50: #fff2ef;
  --color-rusty-heart-100: #ffe2dd;
  --color-rusty-heart-200: #ffc3ba;
  --color-rusty-heart-300: #faa194;
  --color-rusty-heart-400: #dc7c70;
  --color-rusty-heart-500: #bd5e53;
  --color-rusty-heart-600: #9d4238;
  --color-rusty-heart-700: #803129;
  --color-rusty-heart-800: #67231c;
  --color-rusty-heart-900: #531813;
  --color-rusty-heart-950: #360d09;
}