Memorial Black to Tropical Rainforest Color Palette

About this palette

Memorial Black to Tropical Rainforest is a 4-color dark, cool, gradient palette: #051802 (Memorial Black), #002B15 (Haunted Forest), #164646 (Emerald Forest), #007355 (Tropical Rainforest). It mixes black, green, turquoise tones and feels cool overall. The strongest text pairing is #051802 on #007355 with a contrast ratio of 3.15:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Memorial Black	rgb(5, 24, 2)	hsl(112, 85%, 5%)
Haunted Forest	rgb(0, 43, 21)	hsl(149, 100%, 8%)
Emerald Forest	rgb(22, 70, 70)	hsl(180, 52%, 18%)
Tropical Rainforest	rgb(0, 115, 85)	hsl(164, 100%, 23%)

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.15:1 Poor#051802 on #007355
Aa3.15:1 Poor#007355 on #051802

Color blindness preview

CSS variables

/* Memorial Black to Tropical Rainforest — https://swatchly.xyz/palette/051802-002b15-164646-007355 */
:root {
  --memorial-black: #051802;
  --haunted-forest: #002b15;
  --emerald-forest: #164646;
  --tropical-rainforest: #007355;
}

Tailwind CSS v4

/* Memorial Black to Tropical Rainforest — https://swatchly.xyz/palette/051802-002b15-164646-007355 */
@theme {
  --color-memorial-black: #051802;
  --color-memorial-black-50: #ecfae8;
  --color-memorial-black-100: #e0f1dd;
  --color-memorial-black-200: #cbdec6;
  --color-memorial-black-300: #b2c8ad;
  --color-memorial-black-400: #92aa8c;
  --color-memorial-black-500: #738b6e;
  --color-memorial-black-600: #576e52;
  --color-memorial-black-700: #40543c;
  --color-memorial-black-800: #2e3e2a;
  --color-memorial-black-900: #1f2c1c;
  --color-memorial-black-950: #051802;
  --color-haunted-forest: #002b15;
  --color-haunted-forest-50: #e4fcec;
  --color-haunted-forest-100: #d8f3e0;
  --color-haunted-forest-200: #c0e1cb;
  --color-haunted-forest-300: #a6ccb3;
  --color-haunted-forest-400: #84ad92;
  --color-haunted-forest-500: #689277;
  --color-haunted-forest-600: #4f785e;
  --color-haunted-forest-700: #3c6149;
  --color-haunted-forest-800: #2c4d39;
  --color-haunted-forest-900: #203d2b;
  --color-haunted-forest-950: #002b15;
  --color-emerald-forest: #164646;
  --color-emerald-forest-50: #e1fbfb;
  --color-emerald-forest-100: #d4f2f2;
  --color-emerald-forest-200: #bce0df;
  --color-emerald-forest-300: #a0c9c9;
  --color-emerald-forest-400: #7caaa9;
  --color-emerald-forest-500: #5f8d8d;
  --color-emerald-forest-600: #457271;
  --color-emerald-forest-700: #305959;
  --color-emerald-forest-800: #164646;
  --color-emerald-forest-900: #163535;
  --color-emerald-forest-950: #0b2120;
  --color-tropical-rainforest: #007355;
  --color-tropical-rainforest-50: #dbffef;
  --color-tropical-rainforest-100: #c1f7e0;
  --color-tropical-rainforest-200: #a2e4c9;
  --color-tropical-rainforest-300: #81ceaf;
  --color-tropical-rainforest-400: #56ad8d;
  --color-tropical-rainforest-500: #329070;
  --color-tropical-rainforest-600: #007355;
  --color-tropical-rainforest-700: #005b43;
  --color-tropical-rainforest-800: #004834;
  --color-tropical-rainforest-900: #003828;
  --color-tropical-rainforest-950: #002318;
}