Black Sabbath to Baby Bear Color Palette

About this palette

Black Sabbath to Baby Bear is a 5-color dark, cool, gradient palette: #170222 (Black Sabbath), #2F0035 (Dark Purple), #47252D (Castro), #64357C (Galactic Grapevine), #735C49 (Baby Bear). It mixes purple, red, brown tones and feels cool overall. The strongest text pairing is #170222 on #735C49 with a contrast ratio of 3.14:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Sabbath	rgb(23, 2, 34)	hsl(279, 89%, 7%)
Dark Purple	rgb(47, 0, 53)	hsl(293, 100%, 10%)
Castro	rgb(71, 37, 45)	hsl(346, 31%, 21%)
Galactic Grapevine	rgb(100, 53, 124)	hsl(280, 40%, 35%)
Baby Bear	rgb(115, 92, 73)	hsl(27, 22%, 37%)

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.14:1 Poor#170222 on #735C49
Aa3.14:1 Poor#735C49 on #170222

Color blindness preview

CSS variables

/* Black Sabbath to Baby Bear — https://swatchly.xyz/palette/170222-2f0035-47252d-64357c-735c49 */
:root {
  --black-sabbath: #170222;
  --dark-purple: #2f0035;
  --castro: #47252d;
  --galactic-grapevine: #64357c;
  --baby-bear: #735c49;
}

Tailwind CSS v4

/* Black Sabbath to Baby Bear — https://swatchly.xyz/palette/170222-2f0035-47252d-64357c-735c49 */
@theme {
  --color-black-sabbath: #170222;
  --color-black-sabbath-50: #faf2ff;
  --color-black-sabbath-100: #f4e4ff;
  --color-black-sabbath-200: #e3cef1;
  --color-black-sabbath-300: #ceb6dd;
  --color-black-sabbath-400: #b096c0;
  --color-black-sabbath-500: #9176a1;
  --color-black-sabbath-600: #715980;
  --color-black-sabbath-700: #564063;
  --color-black-sabbath-800: #3e2c48;
  --color-black-sabbath-900: #291c31;
  --color-black-sabbath-950: #170222;
  --color-dark-purple: #2f0035;
  --color-dark-purple-50: #fef0ff;
  --color-dark-purple-100: #fce1ff;
  --color-dark-purple-200: #f1c7f5;
  --color-dark-purple-300: #ddaee2;
  --color-dark-purple-400: #c08cc6;
  --color-dark-purple-500: #a36fa9;
  --color-dark-purple-600: #86558c;
  --color-dark-purple-700: #6b3f70;
  --color-dark-purple-800: #542e58;
  --color-dark-purple-900: #402043;
  --color-dark-purple-950: #2f0035;
  --color-castro: #47252d;
  --color-castro-50: #fff1f3;
  --color-castro-100: #ffe3e8;
  --color-castro-200: #efcdd4;
  --color-castro-300: #dbb5bd;
  --color-castro-400: #be959c;
  --color-castro-500: #a27981;
  --color-castro-600: #855e66;
  --color-castro-700: #6b4950;
  --color-castro-800: #55373d;
  --color-castro-900: #47252d;
  --color-castro-950: #2a181c;
  --color-galactic-grapevine: #64357c;
  --color-galactic-grapevine-50: #faf1ff;
  --color-galactic-grapevine-100: #f5e4ff;
  --color-galactic-grapevine-200: #eac6ff;
  --color-galactic-grapevine-300: #d6aaef;
  --color-galactic-grapevine-400: #b786d2;
  --color-galactic-grapevine-500: #9a69b4;
  --color-galactic-grapevine-600: #7c4e95;
  --color-galactic-grapevine-700: #64357c;
  --color-galactic-grapevine-800: #4d2a60;
  --color-galactic-grapevine-900: #3d1e4c;
  --color-galactic-grapevine-950: #261131;
  --color-baby-bear: #735c49;
  --color-baby-bear-50: #fff3e9;
  --color-baby-bear-100: #f7e6d8;
  --color-baby-bear-200: #e4cfbf;
  --color-baby-bear-300: #cdb6a4;
  --color-baby-bear-400: #ad9581;
  --color-baby-bear-500: #907864;
  --color-baby-bear-600: #735c49;
  --color-baby-bear-700: #5c4838;
  --color-baby-bear-800: #49382a;
  --color-baby-bear-900: #392b1f;
  --color-baby-bear-950: #241a11;
}