Netherworld to What We Do in the Shadows color palette

801D1ANetherworld 6D6245Ochicha Latte 161000Balsamico 253A00Melancholia 46001EWhat We Do in the Shadows

Open in generator Export PNG, PDF, ASE…

About this palette

Netherworld to What We Do in the Shadows is a 5-color dark, warm palette: #801D1A (Netherworld), #6D6245 (Ochicha Latte), #161000 (Balsamico), #253A00 (Melancholia), #46001E (What We Do in the Shadows). It mixes red, brown, black, green tones and feels warm overall. The strongest text pairing is #6D6245 on #161000 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
Netherworld	rgb(128, 29, 26)	hsl(2, 66%, 30%)
Ochicha Latte	rgb(109, 98, 69)	hsl(44, 22%, 35%)
Balsamico	rgb(22, 16, 0)	hsl(44, 100%, 4%)
Melancholia	rgb(37, 58, 0)	hsl(82, 100%, 11%)
What We Do in the Shadows	rgb(70, 0, 30)	hsl(334, 100%, 14%)

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#6D6245 on #161000
Aa3.14:1 Poor#161000 on #6D6245

Color blindness preview

CSS variables

/* Netherworld to What We Do in the Shadows — https://swatchly.xyz/palette/801d1a-6d6245-161000-253a00-46001e */
:root {
  --netherworld: #801d1a;
  --ochicha-latte: #6d6245;
  --balsamico: #161000;
  --melancholia: #253a00;
  --what-we-do-in-the-shadows: #46001e;
}

Tailwind CSS v4

/* Netherworld to What We Do in the Shadows — https://swatchly.xyz/palette/801d1a-6d6245-161000-253a00-46001e */
@theme {
  --color-netherworld: #801d1a;
  --color-netherworld-50: #fff2f0;
  --color-netherworld-100: #ffe4e0;
  --color-netherworld-200: #ffc8c1;
  --color-netherworld-300: #ffa79d;
  --color-netherworld-400: #e98277;
  --color-netherworld-500: #cd655b;
  --color-netherworld-600: #af4b43;
  --color-netherworld-700: #933630;
  --color-netherworld-800: #801d1a;
  --color-netherworld-900: #611a16;
  --color-netherworld-950: #410d0a;
  --color-ochicha-latte: #6d6245;
  --color-ochicha-latte-50: #fcf5e3;
  --color-ochicha-latte-100: #f1e9d5;
  --color-ochicha-latte-200: #ddd4bb;
  --color-ochicha-latte-300: #c6bba0;
  --color-ochicha-latte-400: #a69a7c;
  --color-ochicha-latte-500: #897e60;
  --color-ochicha-latte-600: #6d6245;
  --color-ochicha-latte-700: #574d34;
  --color-ochicha-latte-800: #443c26;
  --color-ochicha-latte-900: #352e1c;
  --color-ochicha-latte-950: #211c0f;
  --color-balsamico: #161000;
  --color-balsamico-50: #f9f5e7;
  --color-balsamico-100: #f0ebdb;
  --color-balsamico-200: #ddd7c4;
  --color-balsamico-300: #c7c1ab;
  --color-balsamico-400: #a9a18a;
  --color-balsamico-500: #8a836b;
  --color-balsamico-600: #6c664f;
  --color-balsamico-700: #524c39;
  --color-balsamico-800: #3c3727;
  --color-balsamico-900: #292519;
  --color-balsamico-950: #161000;
  --color-melancholia: #253a00;
  --color-melancholia-50: #ecfcdb;
  --color-melancholia-100: #e1f3ce;
  --color-melancholia-200: #cbe0b5;
  --color-melancholia-300: #b3ca99;
  --color-melancholia-400: #92ac75;
  --color-melancholia-500: #779059;
  --color-melancholia-600: #5d753f;
  --color-melancholia-700: #485d2c;
  --color-melancholia-800: #36491e;
  --color-melancholia-900: #253a00;
  --color-melancholia-950: #182309;
  --color-what-we-do-in-the-shadows: #46001e;
  --color-what-we-do-in-the-shadows-50: #fff1f4;
  --color-what-we-do-in-the-shadows-100: #ffe3e9;
  --color-what-we-do-in-the-shadows-200: #ffc6d3;
  --color-what-we-do-in-the-shadows-300: #f2a9bc;
  --color-what-we-do-in-the-shadows-400: #d5879c;
  --color-what-we-do-in-the-shadows-500: #ba6c81;
  --color-what-we-do-in-the-shadows-600: #9d5268;
  --color-what-we-do-in-the-shadows-700: #823e52;
  --color-what-we-do-in-the-shadows-800: #6a2e40;
  --color-what-we-do-in-the-shadows-900: #552232;
  --color-what-we-do-in-the-shadows-950: #46001e;
}