Ethereal Woods to Nordic Noir Color Palette

About this palette

Ethereal Woods to Nordic Noir is a 5-color dark, cool palette: #386151 (Ethereal Woods), #00262C (Sunken Ship), #00110C (Jedi Night), #005165 (Raging Thunderstorm), #003446 (Nordic Noir). It mixes turquoise, black, blue tones and feels cool overall. The strongest text pairing is #386151 on #00110C with a contrast ratio of 2.76:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ethereal Woods	rgb(56, 97, 81)	hsl(157, 27%, 30%)
Sunken Ship	rgb(0, 38, 44)	hsl(188, 100%, 9%)
Jedi Night	rgb(0, 17, 12)	hsl(162, 100%, 3%)
Raging Thunderstorm	rgb(0, 81, 101)	hsl(192, 100%, 20%)
Nordic Noir	rgb(0, 52, 70)	hsl(195, 100%, 14%)

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

/* Ethereal Woods to Nordic Noir — https://swatchly.xyz/palette/386151-00262c-00110c-005165-003446 */
:root {
  --ethereal-woods: #386151;
  --sunken-ship: #00262c;
  --jedi-night: #00110c;
  --raging-thunderstorm: #005165;
  --nordic-noir: #003446;
}

Tailwind CSS v4

/* Ethereal Woods to Nordic Noir — https://swatchly.xyz/palette/386151-00262c-00110c-005165-003446 */
@theme {
  --color-ethereal-woods: #386151;
  --color-ethereal-woods-50: #e3fcf1;
  --color-ethereal-woods-100: #d7f3e7;
  --color-ethereal-woods-200: #c0e1d2;
  --color-ethereal-woods-300: #a6ccbc;
  --color-ethereal-woods-400: #84ad9c;
  --color-ethereal-woods-500: #689281;
  --color-ethereal-woods-600: #4f7867;
  --color-ethereal-woods-700: #386151;
  --color-ethereal-woods-800: #2a4c3f;
  --color-ethereal-woods-900: #1e3b30;
  --color-ethereal-woods-950: #10251d;
  --color-sunken-ship: #00262c;
  --color-sunken-ship-50: #e4fafe;
  --color-sunken-ship-100: #d8f0f5;
  --color-sunken-ship-200: #c1dee3;
  --color-sunken-ship-300: #a7c8ce;
  --color-sunken-ship-400: #84a9b0;
  --color-sunken-ship-500: #698e95;
  --color-sunken-ship-600: #4f737a;
  --color-sunken-ship-700: #3b5c62;
  --color-sunken-ship-800: #2c494e;
  --color-sunken-ship-900: #20393d;
  --color-sunken-ship-950: #00262c;
  --color-jedi-night: #00110c;
  --color-jedi-night-50: #ebf9f4;
  --color-jedi-night-100: #dfefea;
  --color-jedi-night-200: #c9ddd6;
  --color-jedi-night-300: #b1c7c0;
  --color-jedi-night-400: #90a8a0;
  --color-jedi-night-500: #708881;
  --color-jedi-night-600: #536a63;
  --color-jedi-night-700: #3b4f49;
  --color-jedi-night-800: #283833;
  --color-jedi-night-900: #192521;
  --color-jedi-night-950: #00110c;
  --color-raging-thunderstorm: #005165;
  --color-raging-thunderstorm-50: #e7f9ff;
  --color-raging-thunderstorm-100: #cff2ff;
  --color-raging-thunderstorm-200: #b0e0f2;
  --color-raging-thunderstorm-300: #95ccdf;
  --color-raging-thunderstorm-400: #70aec4;
  --color-raging-thunderstorm-500: #5394aa;
  --color-raging-thunderstorm-600: #397a8f;
  --color-raging-thunderstorm-700: #256377;
  --color-raging-thunderstorm-800: #005165;
  --color-raging-thunderstorm-900: #093e4d;
  --color-raging-thunderstorm-950: #022832;
  --color-nordic-noir: #003446;
  --color-nordic-noir-50: #e9f8ff;
  --color-nordic-noir-100: #d3f1ff;
  --color-nordic-noir-200: #badeef;
  --color-nordic-noir-300: #9fc8db;
  --color-nordic-noir-400: #7ba8bd;
  --color-nordic-noir-500: #5e8ca1;
  --color-nordic-noir-600: #447084;
  --color-nordic-noir-700: #30586a;
  --color-nordic-noir-800: #204453;
  --color-nordic-noir-900: #003446;
  --color-nordic-noir-950: #0a1f28;
}