Forestry to Memorial Black Color Palette

About this palette

Forestry to Memorial Black is a 4-color dark, cool, monochromatic palette: #334219 (Forestry), #566C41 (Under the Radar), #11251C (Nightmare), #0A1200 (Memorial Black). It mixes green, gray, black tones and feels cool overall. The strongest text pairing is #566C41 on #0A1200 with a contrast ratio of 3.29:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Forestry	rgb(51, 66, 25)	hsl(82, 45%, 18%)
Under the Radar	rgb(86, 108, 65)	hsl(91, 25%, 34%)
Nightmare	rgb(17, 37, 28)	hsl(153, 37%, 11%)
Memorial Black	rgb(10, 18, 0)	hsl(87, 100%, 4%)

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.29:1 Poor#566C41 on #0A1200
Aa3.29:1 Poor#0A1200 on #566C41

Color blindness preview

CSS variables

/* Forestry to Memorial Black — https://swatchly.xyz/palette/334219-566c41-11251c-0a1200 */
:root {
  --forestry: #334219;
  --under-the-radar: #566c41;
  --nightmare: #11251c;
  --memorial-black: #0a1200;
}

Tailwind CSS v4

/* Forestry to Memorial Black — https://swatchly.xyz/palette/334219-566c41-11251c-0a1200 */
@theme {
  --color-forestry: #334219;
  --color-forestry-50: #effae0;
  --color-forestry-100: #e4f1d3;
  --color-forestry-200: #cfdebb;
  --color-forestry-300: #b6c79f;
  --color-forestry-400: #95a77b;
  --color-forestry-500: #788a5e;
  --color-forestry-600: #5e6e45;
  --color-forestry-700: #475631;
  --color-forestry-800: #334219;
  --color-forestry-900: #283217;
  --color-forestry-950: #171e0c;
  --color-under-the-radar: #566c41;
  --color-under-the-radar-50: #ecfbe0;
  --color-under-the-radar-100: #e0f0d2;
  --color-under-the-radar-200: #c9dcb8;
  --color-under-the-radar-300: #afc59c;
  --color-under-the-radar-400: #8da578;
  --color-under-the-radar-500: #71885c;
  --color-under-the-radar-600: #566c41;
  --color-under-the-radar-700: #435631;
  --color-under-the-radar-800: #334323;
  --color-under-the-radar-900: #273419;
  --color-under-the-radar-950: #17210d;
  --color-nightmare: #11251c;
  --color-nightmare-50: #ebf9f2;
  --color-nightmare-100: #e0f0e7;
  --color-nightmare-200: #caddd3;
  --color-nightmare-300: #b2c7bc;
  --color-nightmare-400: #91a89c;
  --color-nightmare-500: #768d81;
  --color-nightmare-600: #5c7267;
  --color-nightmare-700: #475b51;
  --color-nightmare-800: #36483f;
  --color-nightmare-900: #293830;
  --color-nightmare-950: #11251c;
  --color-memorial-black: #0a1200;
  --color-memorial-black-50: #f1f8e8;
  --color-memorial-black-100: #e6efdc;
  --color-memorial-black-200: #d2dcc5;
  --color-memorial-black-300: #bbc6ac;
  --color-memorial-black-400: #9ba78b;
  --color-memorial-black-500: #7c886c;
  --color-memorial-black-600: #5f6a50;
  --color-memorial-black-700: #464f39;
  --color-memorial-black-800: #313927;
  --color-memorial-black-900: #212618;
  --color-memorial-black-950: #0a1200;
}