Emerald Forest to Haunted Forest Color Palette

About this palette

Emerald Forest to Haunted Forest is a 4-color dark palette: #2A4246 (Emerald Forest), #00110F (Jedi Night), #00657F (Harem Silk), #002B15 (Haunted Forest). It mixes gray, black, blue, green tones and feels cool overall. The strongest text pairing is #00110F on #00657F with a contrast ratio of 2.91:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Emerald Forest	rgb(42, 66, 70)	hsl(189, 25%, 22%)
Jedi Night	rgb(0, 17, 15)	hsl(173, 100%, 3%)
Harem Silk	rgb(0, 101, 127)	hsl(192, 100%, 25%)
Haunted Forest	rgb(0, 43, 21)	hsl(149, 100%, 8%)

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.

Color blindness preview

CSS variables

/* Emerald Forest to Haunted Forest — https://swatchly.xyz/palette/2a4246-00110f-00657f-002b15 */
:root {
  --emerald-forest: #2a4246;
  --jedi-night: #00110f;
  --harem-silk: #00657f;
  --haunted-forest: #002b15;
}

Tailwind CSS v4

/* Emerald Forest to Haunted Forest — https://swatchly.xyz/palette/2a4246-00110f-00657f-002b15 */
@theme {
  --color-emerald-forest: #2a4246;
  --color-emerald-forest-50: #e9f9fb;
  --color-emerald-forest-100: #deeff2;
  --color-emerald-forest-200: #c7dcdf;
  --color-emerald-forest-300: #adc5c9;
  --color-emerald-forest-400: #8ba5a9;
  --color-emerald-forest-500: #6f898d;
  --color-emerald-forest-600: #556d71;
  --color-emerald-forest-700: #3f5559;
  --color-emerald-forest-800: #2a4246;
  --color-emerald-forest-900: #223235;
  --color-emerald-forest-950: #131f20;
  --color-jedi-night: #00110f;
  --color-jedi-night-50: #eaf9f7;
  --color-jedi-night-100: #dfefed;
  --color-jedi-night-200: #c9dcd9;
  --color-jedi-night-300: #b1c6c3;
  --color-jedi-night-400: #90a7a4;
  --color-jedi-night-500: #708885;
  --color-jedi-night-600: #536966;
  --color-jedi-night-700: #3b4f4c;
  --color-jedi-night-800: #283836;
  --color-jedi-night-900: #192524;
  --color-jedi-night-950: #00110f;
  --color-harem-silk: #00657f;
  --color-harem-silk-50: #e8f8ff;
  --color-harem-silk-100: #d0f2ff;
  --color-harem-silk-200: #aae3f8;
  --color-harem-silk-300: #8dcee7;
  --color-harem-silk-400: #66b0cb;
  --color-harem-silk-500: #4696b1;
  --color-harem-silk-600: #297b96;
  --color-harem-silk-700: #00657f;
  --color-harem-silk-800: #004f64;
  --color-harem-silk-900: #003d4e;
  --color-harem-silk-950: #002632;
  --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;
}