Midnight Edition to Himalaya Color Palette

About this palette

Midnight Edition to Himalaya is a 5-color dark, cool, earthy, gradient palette: #001216 (Midnight Edition), #00231B (Nightmare), #283F0A (Myrtle), #3F5000 (Godzilla), #706700 (Himalaya). It mixes black, turquoise, green, brown tones and feels cool overall. The strongest text pairing is #001216 on #706700 with a contrast ratio of 3.30:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Edition	rgb(0, 18, 22)	hsl(191, 100%, 4%)
Nightmare	rgb(0, 35, 27)	hsl(166, 100%, 7%)
Myrtle	rgb(40, 63, 10)	hsl(86, 73%, 14%)
Godzilla	rgb(63, 80, 0)	hsl(73, 100%, 16%)
Himalaya	rgb(112, 103, 0)	hsl(55, 100%, 22%)

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.30:1 Poor#001216 on #706700
Aa3.30:1 Poor#706700 on #001216

Color blindness preview

CSS variables

/* Midnight Edition to Himalaya — https://swatchly.xyz/palette/001216-00231b-283f0a-3f5000-706700 */
:root {
  --midnight-edition: #001216;
  --nightmare: #00231b;
  --myrtle: #283f0a;
  --godzilla: #3f5000;
  --himalaya: #706700;
}

Tailwind CSS v4

/* Midnight Edition to Himalaya — https://swatchly.xyz/palette/001216-00231b-283f0a-3f5000-706700 */
@theme {
  --color-midnight-edition: #001216;
  --color-midnight-edition-50: #eaf8fb;
  --color-midnight-edition-100: #deeff2;
  --color-midnight-edition-200: #c8dce0;
  --color-midnight-edition-300: #b0c6ca;
  --color-midnight-edition-400: #8ea7ac;
  --color-midnight-edition-500: #6f888d;
  --color-midnight-edition-600: #53696e;
  --color-midnight-edition-700: #3b4f53;
  --color-midnight-edition-800: #29393c;
  --color-midnight-edition-900: #1a2629;
  --color-midnight-edition-950: #001216;
  --color-nightmare: #00231b;
  --color-nightmare-50: #e6fbf4;
  --color-nightmare-100: #daf1ea;
  --color-nightmare-200: #c3dfd6;
  --color-nightmare-300: #a9c9bf;
  --color-nightmare-400: #87aa9f;
  --color-nightmare-500: #6b8f84;
  --color-nightmare-600: #517369;
  --color-nightmare-700: #3c5b52;
  --color-nightmare-800: #2b473f;
  --color-nightmare-900: #1f362f;
  --color-nightmare-950: #00231b;
  --color-myrtle: #283f0a;
  --color-myrtle-50: #ebfcdd;
  --color-myrtle-100: #e0f3d0;
  --color-myrtle-200: #cae0b7;
  --color-myrtle-300: #b2cb9b;
  --color-myrtle-400: #92ad79;
  --color-myrtle-500: #77925d;
  --color-myrtle-600: #5e7845;
  --color-myrtle-700: #496132;
  --color-myrtle-800: #394e23;
  --color-myrtle-900: #283f0a;
  --color-myrtle-950: #1a270c;
  --color-godzilla: #3f5000;
  --color-godzilla-50: #eefcd4;
  --color-godzilla-100: #e4f2c6;
  --color-godzilla-200: #cfe0ab;
  --color-godzilla-300: #b8cb8f;
  --color-godzilla-400: #99ae6a;
  --color-godzilla-500: #7f934d;
  --color-godzilla-600: #667934;
  --color-godzilla-700: #516221;
  --color-godzilla-800: #3f5000;
  --color-godzilla-900: #313d08;
  --color-godzilla-950: #1e2702;
  --color-himalaya: #706700;
  --color-himalaya-50: #fbf8cb;
  --color-himalaya-100: #f1edb9;
  --color-himalaya-200: #ded89a;
  --color-himalaya-300: #c7c079;
  --color-himalaya-400: #a8a04f;
  --color-himalaya-500: #8c832c;
  --color-himalaya-600: #706700;
  --color-himalaya-700: #595100;
  --color-himalaya-800: #454000;
  --color-himalaya-900: #363100;
  --color-himalaya-950: #221e00;
}