Brown to Forestial Outpost Color Palette

About this palette

Brown to Forestial Outpost is a 4-color dark, cool, earthy palette: #623D00 (Brown), #070D00 (Blackn’t), #252C00 (Darkest Forest), #4F671E (Forestial Outpost). It mixes brown, black, green tones and feels cool overall. The strongest text pairing is #070D00 on #4F671E with a contrast ratio of 3.09:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Brown	rgb(98, 61, 0)	hsl(37, 100%, 19%)
Blackn’t	rgb(7, 13, 0)	hsl(88, 100%, 3%)
Darkest Forest	rgb(37, 44, 0)	hsl(70, 100%, 9%)
Forestial Outpost	rgb(79, 103, 30)	hsl(80, 55%, 26%)

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.09:1 Poor#070D00 on #4F671E
Aa3.09:1 Poor#4F671E on #070D00

Color blindness preview

CSS variables

/* Brown to Forestial Outpost — https://swatchly.xyz/palette/623d00-070d00-252c00-4f671e */
:root {
  --brown: #623d00;
  --blackn-t: #070d00;
  --darkest-forest: #252c00;
  --forestial-outpost: #4f671e;
}

Tailwind CSS v4

/* Brown to Forestial Outpost — https://swatchly.xyz/palette/623d00-070d00-252c00-4f671e */
@theme {
  --color-brown: #623d00;
  --color-brown-50: #fff3e5;
  --color-brown-100: #ffe7cb;
  --color-brown-200: #f2d1ab;
  --color-brown-300: #e0ba8f;
  --color-brown-400: #c39b6a;
  --color-brown-500: #a9804d;
  --color-brown-600: #8d6634;
  --color-brown-700: #745021;
  --color-brown-800: #623d00;
  --color-brown-900: #4a2f08;
  --color-brown-950: #301d02;
  --color-blackn-t: #070d00;
  --color-blackn-t-50: #f2f8e9;
  --color-blackn-t-100: #e7eede;
  --color-blackn-t-200: #d3dbc8;
  --color-blackn-t-300: #bcc5af;
  --color-blackn-t-400: #9ca68e;
  --color-blackn-t-500: #7c866e;
  --color-blackn-t-600: #5e6751;
  --color-blackn-t-700: #444c39;
  --color-blackn-t-800: #2f3526;
  --color-blackn-t-900: #1d2217;
  --color-blackn-t-950: #070d00;
  --color-darkest-forest: #252c00;
  --color-darkest-forest-50: #f2f9de;
  --color-darkest-forest-100: #e8efd2;
  --color-darkest-forest-200: #d4dcb9;
  --color-darkest-forest-300: #bdc69e;
  --color-darkest-forest-400: #9da77b;
  --color-darkest-forest-500: #848e61;
  --color-darkest-forest-600: #6b7549;
  --color-darkest-forest-700: #575f37;
  --color-darkest-forest-800: #464d29;
  --color-darkest-forest-900: #383e1e;
  --color-darkest-forest-950: #252c00;
  --color-forestial-outpost: #4f671e;
  --color-forestial-outpost-50: #ecfdd4;
  --color-forestial-outpost-100: #e1f3c6;
  --color-forestial-outpost-200: #cde3ad;
  --color-forestial-outpost-300: #b6ce91;
  --color-forestial-outpost-400: #97b16d;
  --color-forestial-outpost-500: #7d9750;
  --color-forestial-outpost-600: #647d36;
  --color-forestial-outpost-700: #4f671e;
  --color-forestial-outpost-800: #3d5112;
  --color-forestial-outpost-900: #2e3f07;
  --color-forestial-outpost-950: #1b2802;
}