Blackn’t to Forestial Outpost color palette

050E00Blackn’t 291800Shadow Play 164142Botanical Night 573C17Pineapple 596300Forestial Outpost

About this palette

Blackn’t to Forestial Outpost is a 5-color dark, cool, earthy palette: #050E00 (Blackn’t), #291800 (Shadow Play), #164142 (Botanical Night), #573C17 (Pineapple), #596300 (Forestial Outpost). It mixes black, brown, turquoise, green tones and feels cool overall. The strongest text pairing is #050E00 on #596300 with a contrast ratio of 3.00:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackn’t	rgb(5, 14, 0)	hsl(99, 100%, 3%)
Shadow Play	rgb(41, 24, 0)	hsl(35, 100%, 8%)
Botanical Night	rgb(22, 65, 66)	hsl(181, 50%, 17%)
Pineapple	rgb(87, 60, 23)	hsl(35, 58%, 22%)
Forestial Outpost	rgb(89, 99, 0)	hsl(66, 100%, 19%)

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.00:1 Poor#050E00 on #596300
Aa3.00:1 Poor#596300 on #050E00

Color blindness preview

CSS variables

/* Blackn’t to Forestial Outpost — https://swatchly.xyz/palette/050e00-291800-164142-573c17-596300 */
:root {
  --blackn-t: #050e00;
  --shadow-play: #291800;
  --botanical-night: #164142;
  --pineapple: #573c17;
  --forestial-outpost: #596300;
}

Tailwind CSS v4

/* Blackn’t to Forestial Outpost — https://swatchly.xyz/palette/050e00-291800-164142-573c17-596300 */
@theme {
  --color-blackn-t: #050e00;
  --color-blackn-t-50: #f0f9e9;
  --color-blackn-t-100: #e5efde;
  --color-blackn-t-200: #d0dcc8;
  --color-blackn-t-300: #b9c6af;
  --color-blackn-t-400: #99a78e;
  --color-blackn-t-500: #79876e;
  --color-blackn-t-600: #5b6851;
  --color-blackn-t-700: #424d39;
  --color-blackn-t-800: #2d3626;
  --color-blackn-t-900: #1c2317;
  --color-blackn-t-950: #050e00;
  --color-shadow-play: #291800;
  --color-shadow-play-50: #fff3e4;
  --color-shadow-play-100: #f7e9d6;
  --color-shadow-play-200: #e6d5be;
  --color-shadow-play-300: #d1bea4;
  --color-shadow-play-400: #b39e82;
  --color-shadow-play-500: #978266;
  --color-shadow-play-600: #7b674c;
  --color-shadow-play-700: #625038;
  --color-shadow-play-800: #4d3d28;
  --color-shadow-play-900: #3a2d1c;
  --color-shadow-play-950: #291800;
  --color-botanical-night: #164142;
  --color-botanical-night-50: #e2fbfb;
  --color-botanical-night-100: #d6f2f2;
  --color-botanical-night-200: #bedfdf;
  --color-botanical-night-300: #a4c9ca;
  --color-botanical-night-400: #82acad;
  --color-botanical-night-500: #679293;
  --color-botanical-night-600: #4e7879;
  --color-botanical-night-700: #3b6263;
  --color-botanical-night-800: #2c4f50;
  --color-botanical-night-900: #164142;
  --color-botanical-night-950: #122929;
  --color-pineapple: #573c17;
  --color-pineapple-50: #fff3e5;
  --color-pineapple-100: #fce8cf;
  --color-pineapple-200: #ecd3b6;
  --color-pineapple-300: #d7bc9b;
  --color-pineapple-400: #ba9c77;
  --color-pineapple-500: #9e805b;
  --color-pineapple-600: #826642;
  --color-pineapple-700: #6a502f;
  --color-pineapple-800: #573c17;
  --color-pineapple-900: #422e16;
  --color-pineapple-950: #2a1c0a;
  --color-forestial-outpost: #596300;
  --color-forestial-outpost-50: #f2fbce;
  --color-forestial-outpost-100: #e8f2bf;
  --color-forestial-outpost-200: #d5e0a4;
  --color-forestial-outpost-300: #c0cc86;
  --color-forestial-outpost-400: #a1ae60;
  --color-forestial-outpost-500: #879341;
  --color-forestial-outpost-600: #6e7925;
  --color-forestial-outpost-700: #596300;
  --color-forestial-outpost-800: #454d00;
  --color-forestial-outpost-900: #353b00;
  --color-forestial-outpost-950: #212500;
}