Blackn’t to Botanical Color Palette

About this palette

Blackn’t to Botanical is a 4-color dark, earthy, gradient palette: #000D04 (Blackn’t), #282000 (Midnight Pines), #3F3C00 (Dark Olive), #4E6B2F (Botanical). It mixes black, brown, green tones and feels warm overall. The strongest text pairing is #000D04 on #4E6B2F with a contrast ratio of 3.27:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackn’t	rgb(0, 13, 4)	hsl(138, 100%, 3%)
Midnight Pines	rgb(40, 32, 0)	hsl(48, 100%, 8%)
Dark Olive	rgb(63, 60, 0)	hsl(57, 100%, 12%)
Botanical	rgb(78, 107, 47)	hsl(89, 39%, 30%)

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.27:1 Poor#000D04 on #4E6B2F
Aa3.27:1 Poor#4E6B2F on #000D04

Color blindness preview

CSS variables

/* Blackn’t to Botanical — https://swatchly.xyz/palette/000d04-282000-3f3c00-4e6b2f */
:root {
  --blackn-t: #000d04;
  --midnight-pines: #282000;
  --dark-olive: #3f3c00;
  --botanical: #4e6b2f;
}

Tailwind CSS v4

/* Blackn’t to Botanical — https://swatchly.xyz/palette/000d04-282000-3f3c00-4e6b2f */
@theme {
  --color-blackn-t: #000d04;
  --color-blackn-t-50: #ecf9f0;
  --color-blackn-t-100: #e1f0e5;
  --color-blackn-t-200: #cbddd0;
  --color-blackn-t-300: #b3c7b9;
  --color-blackn-t-400: #92a899;
  --color-blackn-t-500: #718878;
  --color-blackn-t-600: #54685a;
  --color-blackn-t-700: #3b4d41;
  --color-blackn-t-800: #27352c;
  --color-blackn-t-900: #17211a;
  --color-blackn-t-950: #000d04;
  --color-midnight-pines: #282000;
  --color-midnight-pines-50: #fbf5e1;
  --color-midnight-pines-100: #f1ecd4;
  --color-midnight-pines-200: #dfd8bc;
  --color-midnight-pines-300: #c9c1a2;
  --color-midnight-pines-400: #aba280;
  --color-midnight-pines-500: #908764;
  --color-midnight-pines-600: #756c4b;
  --color-midnight-pines-700: #5e5638;
  --color-midnight-pines-800: #4a4328;
  --color-midnight-pines-900: #3a341d;
  --color-midnight-pines-950: #282000;
  --color-dark-olive: #3f3c00;
  --color-dark-olive-50: #f8f8d8;
  --color-dark-olive-100: #eeeecb;
  --color-dark-olive-200: #dbdbb1;
  --color-dark-olive-300: #c5c495;
  --color-dark-olive-400: #a8a672;
  --color-dark-olive-500: #8e8c56;
  --color-dark-olive-600: #75733e;
  --color-dark-olive-700: #5f5d2b;
  --color-dark-olive-800: #4d4b1e;
  --color-dark-olive-900: #3f3c00;
  --color-dark-olive-950: #282608;
  --color-botanical: #4e6b2f;
  --color-botanical-50: #eafdd9;
  --color-botanical-100: #dcf2c9;
  --color-botanical-200: #c3ddac;
  --color-botanical-300: #a9c68e;
  --color-botanical-400: #86a569;
  --color-botanical-500: #69884b;
  --color-botanical-600: #4e6b2f;
  --color-botanical-700: #3c5521;
  --color-botanical-800: #2e4315;
  --color-botanical-900: #22340d;
  --color-botanical-950: #142105;
}