Blackn’t to Black Forest Color Palette

About this palette

Blackn’t to Black Forest is a 5-color dark, cool, earthy, gradient palette: #000B04 (Blackn’t), #152500 (Lindworm Green), #003F44 (Rich Black), #005A38 (Moor-Monster), #526554 (Black Forest). It mixes black, green, turquoise tones and feels cool overall. The strongest text pairing is #000B04 on #526554 with a contrast ratio of 3.19:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackn’t	rgb(0, 11, 4)	hsl(142, 100%, 2%)
Lindworm Green	rgb(21, 37, 0)	hsl(86, 100%, 7%)
Rich Black	rgb(0, 63, 68)	hsl(184, 100%, 13%)
Moor-Monster	rgb(0, 90, 56)	hsl(157, 100%, 18%)
Black Forest	rgb(82, 101, 84)	hsl(126, 10%, 36%)

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.19:1 Poor#000B04 on #526554
Aa3.19:1 Poor#526554 on #000B04

Color blindness preview

CSS variables

/* Blackn’t to Black Forest — https://swatchly.xyz/palette/000b04-152500-003f44-005a38-526554 */
:root {
  --blackn-t: #000b04;
  --lindworm-green: #152500;
  --rich-black: #003f44;
  --moor-monster: #005a38;
  --black-forest: #526554;
}

Tailwind CSS v4

/* Blackn’t to Black Forest — https://swatchly.xyz/palette/000b04-152500-003f44-005a38-526554 */
@theme {
  --color-blackn-t: #000b04;
  --color-blackn-t-50: #ecf9f1;
  --color-blackn-t-100: #e1efe6;
  --color-blackn-t-200: #ccdcd2;
  --color-blackn-t-300: #b4c6bb;
  --color-blackn-t-400: #93a79b;
  --color-blackn-t-500: #72877a;
  --color-blackn-t-600: #54675b;
  --color-blackn-t-700: #3b4b41;
  --color-blackn-t-800: #27332c;
  --color-blackn-t-900: #161f1a;
  --color-blackn-t-950: #000b04;
  --color-lindworm-green: #152500;
  --color-lindworm-green-50: #edfae2;
  --color-lindworm-green-100: #e3f1d5;
  --color-lindworm-green-200: #cddebd;
  --color-lindworm-green-300: #b5c9a3;
  --color-lindworm-green-400: #95aa81;
  --color-lindworm-green-500: #7a8e65;
  --color-lindworm-green-600: #60734c;
  --color-lindworm-green-700: #4a5c38;
  --color-lindworm-green-800: #394829;
  --color-lindworm-green-900: #2b381d;
  --color-lindworm-green-950: #152500;
  --color-rich-black: #003f44;
  --color-rich-black-50: #defcff;
  --color-rich-black-100: #d1f3f6;
  --color-rich-black-200: #b8e0e4;
  --color-rich-black-300: #9ccbcf;
  --color-rich-black-400: #79adb2;
  --color-rich-black-500: #5d9297;
  --color-rich-black-600: #44787d;
  --color-rich-black-700: #306166;
  --color-rich-black-800: #214d52;
  --color-rich-black-900: #003f44;
  --color-rich-black-950: #0a272a;
  --color-moor-monster: #005a38;
  --color-moor-monster-50: #ddffeb;
  --color-moor-monster-100: #cbf8dd;
  --color-moor-monster-200: #b0e6c7;
  --color-moor-monster-300: #95d3b0;
  --color-moor-monster-400: #71b691;
  --color-moor-monster-500: #549d77;
  --color-moor-monster-600: #39835e;
  --color-moor-monster-700: #256c4a;
  --color-moor-monster-800: #005a38;
  --color-moor-monster-900: #08452b;
  --color-moor-monster-950: #012d1a;
  --color-black-forest: #526554;
  --color-black-forest-50: #edf9ee;
  --color-black-forest-100: #e2efe3;
  --color-black-forest-200: #cfded0;
  --color-black-forest-300: #b8caba;
  --color-black-forest-400: #9aad9b;
  --color-black-forest-500: #7f9481;
  --color-black-forest-600: #677a69;
  --color-black-forest-700: #526554;
  --color-black-forest-800: #3f4f41;
  --color-black-forest-900: #2f3d31;
  --color-black-forest-950: #1c261e;
}