Blackn’t to Muddy Olive color palette

030C00Blackn’t 082A1ESwamp Thing 00443EBotanical Night 364700Treetop Cathedral 50614FMuddy Olive

About this palette

Blackn’t to Muddy Olive is a 5-color dark, cool, gradient palette: #030C00 (Blackn’t), #082A1E (Swamp Thing), #00443E (Botanical Night), #364700 (Treetop Cathedral), #50614F (Muddy Olive). It mixes black, turquoise, green tones and feels cool overall. The strongest text pairing is #030C00 on #50614F with a contrast ratio of 2.99:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackn’t	rgb(3, 12, 0)	hsl(105, 100%, 2%)
Swamp Thing	rgb(8, 42, 30)	hsl(159, 68%, 10%)
Botanical Night	rgb(0, 68, 62)	hsl(175, 100%, 13%)
Treetop Cathedral	rgb(54, 71, 0)	hsl(74, 100%, 14%)
Muddy Olive	rgb(80, 97, 79)	hsl(117, 10%, 35%)

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

/* Blackn’t to Muddy Olive — https://swatchly.xyz/palette/030c00-082a1e-00443e-364700-50614f */
:root {
  --blackn-t: #030c00;
  --swamp-thing: #082a1e;
  --botanical-night: #00443e;
  --treetop-cathedral: #364700;
  --muddy-olive: #50614f;
}

Tailwind CSS v4

/* Blackn’t to Muddy Olive — https://swatchly.xyz/palette/030c00-082a1e-00443e-364700-50614f */
@theme {
  --color-blackn-t: #030c00;
  --color-blackn-t-50: #eff9ea;
  --color-blackn-t-100: #e4efdf;
  --color-blackn-t-200: #cfdcc9;
  --color-blackn-t-300: #b8c6b0;
  --color-blackn-t-400: #97a78f;
  --color-blackn-t-500: #77876f;
  --color-blackn-t-600: #596751;
  --color-blackn-t-700: #3f4c39;
  --color-blackn-t-800: #2a3425;
  --color-blackn-t-900: #1a2116;
  --color-blackn-t-950: #030c00;
  --color-swamp-thing: #082a1e;
  --color-swamp-thing-50: #e6fbf1;
  --color-swamp-thing-100: #dbf2e7;
  --color-swamp-thing-200: #c4dfd2;
  --color-swamp-thing-300: #aac9bb;
  --color-swamp-thing-400: #89ab9b;
  --color-swamp-thing-500: #6d9081;
  --color-swamp-thing-600: #557667;
  --color-swamp-thing-700: #415f52;
  --color-swamp-thing-800: #314c40;
  --color-swamp-thing-900: #253c32;
  --color-swamp-thing-950: #082a1e;
  --color-botanical-night: #00443e;
  --color-botanical-night-50: #ddfdf8;
  --color-botanical-night-100: #d0f4ee;
  --color-botanical-night-200: #b7e2db;
  --color-botanical-night-300: #9bccc5;
  --color-botanical-night-400: #79afa8;
  --color-botanical-night-500: #5c958e;
  --color-botanical-night-600: #437b74;
  --color-botanical-night-700: #30655f;
  --color-botanical-night-800: #21524c;
  --color-botanical-night-900: #00443e;
  --color-botanical-night-950: #0a2b27;
  --color-treetop-cathedral: #364700;
  --color-treetop-cathedral-50: #eefbd7;
  --color-treetop-cathedral-100: #e3f2c9;
  --color-treetop-cathedral-200: #cee0af;
  --color-treetop-cathedral-300: #b6c991;
  --color-treetop-cathedral-400: #95aa6c;
  --color-treetop-cathedral-500: #798e4e;
  --color-treetop-cathedral-600: #5f7235;
  --color-treetop-cathedral-700: #4a5a22;
  --color-treetop-cathedral-800: #364700;
  --color-treetop-cathedral-900: #2a360b;
  --color-treetop-cathedral-950: #192104;
  --color-muddy-olive: #50614f;
  --color-muddy-olive-50: #eef9ed;
  --color-muddy-olive-100: #e3efe2;
  --color-muddy-olive-200: #cfddce;
  --color-muddy-olive-300: #b8c9b7;
  --color-muddy-olive-400: #99ab98;
  --color-muddy-olive-500: #7e917d;
  --color-muddy-olive-600: #657764;
  --color-muddy-olive-700: #50614f;
  --color-muddy-olive-800: #3e4c3d;
  --color-muddy-olive-900: #2e3a2e;
  --color-muddy-olive-950: #1c251b;
}