Nightmare to Memorial Black Color Palette

About this palette

Nightmare to Memorial Black is a 5-color dark, cool palette: #00201A (Nightmare), #1E5D3C (Pine), #00413B (Botanical Night), #00677A (Teal With It), #120E00 (Memorial Black). It mixes turquoise, green, blue, black tones and feels cool overall. The strongest text pairing is #00677A on #120E00 with a contrast ratio of 2.96:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare	rgb(0, 32, 26)	hsl(169, 100%, 6%)
Pine	rgb(30, 93, 60)	hsl(149, 51%, 24%)
Botanical Night	rgb(0, 65, 59)	hsl(174, 100%, 13%)
Teal With It	rgb(0, 103, 122)	hsl(189, 100%, 24%)
Memorial Black	rgb(18, 14, 0)	hsl(47, 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.

Color blindness preview

CSS variables

/* Nightmare to Memorial Black — https://swatchly.xyz/palette/00201a-1e5d3c-00413b-00677a-120e00 */
:root {
  --nightmare: #00201a;
  --pine: #1e5d3c;
  --botanical-night: #00413b;
  --teal-with-it: #00677a;
  --memorial-black: #120e00;
}

Tailwind CSS v4

/* Nightmare to Memorial Black — https://swatchly.xyz/palette/00201a-1e5d3c-00413b-00677a-120e00 */
@theme {
  --color-nightmare: #00201a;
  --color-nightmare-50: #e6faf5;
  --color-nightmare-100: #dbf1eb;
  --color-nightmare-200: #c4ded7;
  --color-nightmare-300: #aac9c1;
  --color-nightmare-400: #89aaa1;
  --color-nightmare-500: #6b8d85;
  --color-nightmare-600: #51716a;
  --color-nightmare-700: #3c5952;
  --color-nightmare-800: #2b443e;
  --color-nightmare-900: #1e332e;
  --color-nightmare-950: #00201a;
  --color-pine: #1e5d3c;
  --color-pine-50: #ddffe9;
  --color-pine-100: #d0f6dd;
  --color-pine-200: #b5e3c6;
  --color-pine-300: #98cdac;
  --color-pine-400: #72ae8a;
  --color-pine-500: #54916d;
  --color-pine-600: #3a7553;
  --color-pine-700: #1e5d3c;
  --color-pine-800: #18482f;
  --color-pine-900: #0f3822;
  --color-pine-950: #062314;
  --color-botanical-night: #00413b;
  --color-botanical-night-50: #defdf8;
  --color-botanical-night-100: #d1f4ee;
  --color-botanical-night-200: #b8e2db;
  --color-botanical-night-300: #9dccc5;
  --color-botanical-night-400: #79aea7;
  --color-botanical-night-500: #5d948c;
  --color-botanical-night-600: #447a72;
  --color-botanical-night-700: #30635c;
  --color-botanical-night-800: #214f4a;
  --color-botanical-night-900: #00413b;
  --color-botanical-night-950: #0a2825;
  --color-teal-with-it: #00677a;
  --color-teal-with-it-50: #e5f9ff;
  --color-teal-with-it-100: #caf4ff;
  --color-teal-with-it-200: #abe4f3;
  --color-teal-with-it-300: #8dcfe1;
  --color-teal-with-it-400: #66b2c5;
  --color-teal-with-it-500: #4698ab;
  --color-teal-with-it-600: #297d91;
  --color-teal-with-it-700: #00677a;
  --color-teal-with-it-800: #005160;
  --color-teal-with-it-900: #003e4b;
  --color-teal-with-it-950: #002730;
  --color-memorial-black: #120e00;
  --color-memorial-black-50: #f8f6e8;
  --color-memorial-black-100: #efecdc;
  --color-memorial-black-200: #dcd8c6;
  --color-memorial-black-300: #c6c1ad;
  --color-memorial-black-400: #a7a28b;
  --color-memorial-black-500: #87836c;
  --color-memorial-black-600: #696550;
  --color-memorial-black-700: #4f4b39;
  --color-memorial-black-800: #393526;
  --color-memorial-black-900: #262318;
  --color-memorial-black-950: #120e00;
}