Midnight Edition to Dark Forest Color Palette

About this palette

Midnight Edition to Dark Forest is a 5-color dark, gradient palette: #001417 (Midnight Edition), #00271F (Nightmare), #003D07 (Melancholia), #3E4D40 (Mountain View), #4F675D (Dark Forest). It mixes black, turquoise, green, gray tones and feels cool overall. The strongest text pairing is #001417 on #4F675D with a contrast ratio of 3.08:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Edition	rgb(0, 20, 23)	hsl(188, 100%, 5%)
Nightmare	rgb(0, 39, 31)	hsl(168, 100%, 8%)
Melancholia	rgb(0, 61, 7)	hsl(127, 100%, 12%)
Mountain View	rgb(62, 77, 64)	hsl(128, 11%, 27%)
Dark Forest	rgb(79, 103, 93)	hsl(155, 13%, 36%)

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.08:1 Poor#001417 on #4F675D
Aa3.08:1 Poor#4F675D on #001417

Color blindness preview

CSS variables

/* Midnight Edition to Dark Forest — https://swatchly.xyz/palette/001417-00271f-003d07-3e4d40-4f675d */
:root {
  --midnight-edition: #001417;
  --nightmare: #00271f;
  --melancholia: #003d07;
  --mountain-view: #3e4d40;
  --dark-forest: #4f675d;
}

Tailwind CSS v4

/* Midnight Edition to Dark Forest — https://swatchly.xyz/palette/001417-00271f-003d07-3e4d40-4f675d */
@theme {
  --color-midnight-edition: #001417;
  --color-midnight-edition-50: #e9f9fb;
  --color-midnight-edition-100: #deeff1;
  --color-midnight-edition-200: #c8dcdf;
  --color-midnight-edition-300: #afc6c9;
  --color-midnight-edition-400: #8ea7ab;
  --color-midnight-edition-500: #6f888c;
  --color-midnight-edition-600: #526b6e;
  --color-midnight-edition-700: #3b5154;
  --color-midnight-edition-800: #293b3d;
  --color-midnight-edition-900: #1a282a;
  --color-midnight-edition-950: #001417;
  --color-nightmare: #00271f;
  --color-nightmare-50: #e5fbf4;
  --color-nightmare-100: #d9f2ea;
  --color-nightmare-200: #c1dfd6;
  --color-nightmare-300: #a8cac0;
  --color-nightmare-400: #85aba0;
  --color-nightmare-500: #699085;
  --color-nightmare-600: #50756b;
  --color-nightmare-700: #3c5e55;
  --color-nightmare-800: #2c4a42;
  --color-nightmare-900: #203933;
  --color-nightmare-950: #00271f;
  --color-melancholia: #003d07;
  --color-melancholia-50: #e1ffe0;
  --color-melancholia-100: #d3f7d2;
  --color-melancholia-200: #bae5b9;
  --color-melancholia-300: #9fd09e;
  --color-melancholia-400: #7bb17b;
  --color-melancholia-500: #5e955e;
  --color-melancholia-600: #447945;
  --color-melancholia-700: #306131;
  --color-melancholia-800: #214c22;
  --color-melancholia-900: #003d07;
  --color-melancholia-950: #0a240b;
  --color-mountain-view: #3e4d40;
  --color-mountain-view-50: #eef8ef;
  --color-mountain-view-100: #e3efe5;
  --color-mountain-view-200: #cedcd0;
  --color-mountain-view-300: #b8c7ba;
  --color-mountain-view-400: #99a99b;
  --color-mountain-view-500: #7e8f80;
  --color-mountain-view-600: #657567;
  --color-mountain-view-700: #505f52;
  --color-mountain-view-800: #3e4d40;
  --color-mountain-view-900: #303b31;
  --color-mountain-view-950: #1d251e;
  --color-dark-forest: #4f675d;
  --color-dark-forest-50: #eaf9f3;
  --color-dark-forest-100: #ddeee6;
  --color-dark-forest-200: #c4d9d0;
  --color-dark-forest-300: #aac1b7;
  --color-dark-forest-400: #87a096;
  --color-dark-forest-500: #6a8379;
  --color-dark-forest-600: #4f675d;
  --color-dark-forest-700: #3d5249;
  --color-dark-forest-800: #2e4039;
  --color-dark-forest-900: #23322c;
  --color-dark-forest-950: #141f1b;
}