Nocturnal Expedition to Pitch-Black Forests Color Palette

About this palette

Nocturnal Expedition to Pitch-Black Forests is a 4-color dark, cool palette: #004A53 (Nocturnal Expedition), #496771 (Silent Night), #011124 (Void), #003121 (Pitch-Black Forests). It mixes turquoise, blue, black tones and feels cool overall. The strongest text pairing is #496771 on #011124 with a contrast ratio of 3.13:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nocturnal Expedition	rgb(0, 74, 83)	hsl(187, 100%, 16%)
Silent Night	rgb(73, 103, 113)	hsl(195, 22%, 36%)
Void	rgb(1, 17, 36)	hsl(213, 95%, 7%)
Pitch-Black Forests	rgb(0, 49, 33)	hsl(160, 100%, 10%)

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.13:1 Poor#496771 on #011124
Aa3.13:1 Poor#011124 on #496771

Color blindness preview

CSS variables

/* Nocturnal Expedition to Pitch-Black Forests — https://swatchly.xyz/palette/004a53-496771-011124-003121 */
:root {
  --nocturnal-expedition: #004a53;
  --silent-night: #496771;
  --void: #011124;
  --pitch-black-forests: #003121;
}

Tailwind CSS v4

/* Nocturnal Expedition to Pitch-Black Forests — https://swatchly.xyz/palette/004a53-496771-011124-003121 */
@theme {
  --color-nocturnal-expedition: #004a53;
  --color-nocturnal-expedition-50: #e1fbff;
  --color-nocturnal-expedition-100: #cef3f9;
  --color-nocturnal-expedition-200: #b4e1e8;
  --color-nocturnal-expedition-300: #97cbd4;
  --color-nocturnal-expedition-400: #72acb6;
  --color-nocturnal-expedition-500: #54909a;
  --color-nocturnal-expedition-600: #39757e;
  --color-nocturnal-expedition-700: #255d65;
  --color-nocturnal-expedition-800: #004a53;
  --color-nocturnal-expedition-900: #0c383e;
  --color-nocturnal-expedition-950: #042327;
  --color-silent-night: #496771;
  --color-silent-night-50: #e7f9ff;
  --color-silent-night-100: #d8edf5;
  --color-silent-night-200: #c0d9e1;
  --color-silent-night-300: #a4c1cb;
  --color-silent-night-400: #81a0ab;
  --color-silent-night-500: #64838d;
  --color-silent-night-600: #496771;
  --color-silent-night-700: #38525a;
  --color-silent-night-800: #2a4047;
  --color-silent-night-900: #1f3238;
  --color-silent-night-950: #111f23;
  --color-void: #011124;
  --color-void-50: #eef6ff;
  --color-void-100: #ddedfe;
  --color-void-200: #c7daee;
  --color-void-300: #aec3db;
  --color-void-400: #8da4bd;
  --color-void-500: #6e859f;
  --color-void-600: #52687f;
  --color-void-700: #3b4e63;
  --color-void-800: #293949;
  --color-void-900: #1a2733;
  --color-void-950: #011124;
  --color-pitch-black-forests: #003121;
  --color-pitch-black-forests-50: #e2fcf0;
  --color-pitch-black-forests-100: #d6f3e5;
  --color-pitch-black-forests-200: #bee1d0;
  --color-pitch-black-forests-300: #a4ccb9;
  --color-pitch-black-forests-400: #81ad99;
  --color-pitch-black-forests-500: #66947f;
  --color-pitch-black-forests-600: #4e7a67;
  --color-pitch-black-forests-700: #3b6453;
  --color-pitch-black-forests-800: #2d5242;
  --color-pitch-black-forests-900: #214335;
  --color-pitch-black-forests-950: #003121;
}