What We Do in the Shadows to Blackout Color Palette

About this palette

What We Do in the Shadows to Blackout is a 5-color dark, warm, earthy palette: #480019 (What We Do in the Shadows), #544E24 (Jungle King), #393C00 (Dark Olive), #7D4146 (Wild Berry), #130900 (Blackout). It mixes brown, green, red, black tones and feels warm overall. The strongest text pairing is #7D4146 on #130900 with a contrast ratio of 2.55:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
What We Do in the Shadows	rgb(72, 0, 25)	hsl(339, 100%, 14%)
Jungle King	rgb(84, 78, 36)	hsl(53, 40%, 24%)
Dark Olive	rgb(57, 60, 0)	hsl(63, 100%, 12%)
Wild Berry	rgb(125, 65, 70)	hsl(355, 32%, 37%)
Blackout	rgb(19, 9, 0)	hsl(28, 100%, 4%)

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

/* What We Do in the Shadows to Blackout — https://swatchly.xyz/palette/480019-544e24-393c00-7d4146-130900 */
:root {
  --what-we-do-in-the-shadows: #480019;
  --jungle-king: #544e24;
  --dark-olive: #393c00;
  --wild-berry: #7d4146;
  --blackout: #130900;
}

Tailwind CSS v4

/* What We Do in the Shadows to Blackout — https://swatchly.xyz/palette/480019-544e24-393c00-7d4146-130900 */
@theme {
  --color-what-we-do-in-the-shadows: #480019;
  --color-what-we-do-in-the-shadows-50: #fff1f3;
  --color-what-we-do-in-the-shadows-100: #ffe3e7;
  --color-what-we-do-in-the-shadows-200: #ffc6cf;
  --color-what-we-do-in-the-shadows-300: #f3a9b5;
  --color-what-we-do-in-the-shadows-400: #d78795;
  --color-what-we-do-in-the-shadows-500: #bc6c7a;
  --color-what-we-do-in-the-shadows-600: #9e5261;
  --color-what-we-do-in-the-shadows-700: #843e4d;
  --color-what-we-do-in-the-shadows-800: #6c2f3c;
  --color-what-we-do-in-the-shadows-900: #57222e;
  --color-what-we-do-in-the-shadows-950: #480019;
  --color-jungle-king: #544e24;
  --color-jungle-king-50: #faf6dd;
  --color-jungle-king-100: #f0edd0;
  --color-jungle-king-200: #dcd7b5;
  --color-jungle-king-300: #c4bf98;
  --color-jungle-king-400: #a49e74;
  --color-jungle-king-500: #888256;
  --color-jungle-king-600: #6c663d;
  --color-jungle-king-700: #544e24;
  --color-jungle-king-800: #413d1d;
  --color-jungle-king-900: #322e13;
  --color-jungle-king-950: #1f1c09;
  --color-dark-olive: #393c00;
  --color-dark-olive-50: #f5f9d9;
  --color-dark-olive-100: #ebefcb;
  --color-dark-olive-200: #d7dcb2;
  --color-dark-olive-300: #c1c696;
  --color-dark-olive-400: #a3a873;
  --color-dark-olive-500: #888d57;
  --color-dark-olive-600: #6f743e;
  --color-dark-olive-700: #5a5d2c;
  --color-dark-olive-800: #474b1e;
  --color-dark-olive-900: #393c00;
  --color-dark-olive-950: #242608;
  --color-wild-berry: #7d4146;
  --color-wild-berry-50: #fff1f2;
  --color-wild-berry-100: #ffe4e4;
  --color-wild-berry-200: #fec8ca;
  --color-wild-berry-300: #ebafb2;
  --color-wild-berry-400: #cf8d91;
  --color-wild-berry-500: #b37276;
  --color-wild-berry-600: #95585c;
  --color-wild-berry-700: #7d4146;
  --color-wild-berry-800: #623236;
  --color-wild-berry-900: #4e2528;
  --color-wild-berry-950: #321518;
  --color-blackout: #130900;
  --color-blackout-50: #fcf4e9;
  --color-blackout-100: #f3eadd;
  --color-blackout-200: #e1d6c7;
  --color-blackout-300: #ccbfae;
  --color-blackout-400: #ad9f8d;
  --color-blackout-500: #8d7f6d;
  --color-blackout-600: #6e6150;
  --color-blackout-700: #524738;
  --color-blackout-800: #3a3126;
  --color-blackout-900: #261f17;
  --color-blackout-950: #130900;
}