Nocturnal Expedition to Hello Winter Color Palette

About this palette

Nocturnal Expedition to Hello Winter is a 5-color cool palette: #00475B (Nocturnal Expedition), #9B4300 (Hot Brown), #00B27D (Slime Girl), #FFA4D9 (Fresh Gum), #A4FFE3 (Hello Winter). It mixes blue, brown, green, pink, turquoise tones and feels cool overall. The strongest text pairing is #00475B on #A4FFE3 with a contrast ratio of 8.77:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nocturnal Expedition	rgb(0, 71, 91)	hsl(193, 100%, 18%)
Hot Brown	rgb(155, 67, 0)	hsl(26, 100%, 30%)
Slime Girl	rgb(0, 178, 125)	hsl(162, 100%, 35%)
Fresh Gum	rgb(255, 164, 217)	hsl(325, 100%, 82%)
Hello Winter	rgb(164, 255, 227)	hsl(162, 100%, 82%)

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.

Aa8.77:1 Very good#00475B on #A4FFE3
Aa8.77:1 Very good#A4FFE3 on #00475B
Aa5.63:1 Good#00475B on #FFA4D9
Aa5.63:1 Good#FFA4D9 on #00475B
Aa5.63:1 Good#9B4300 on #A4FFE3
Aa5.63:1 Good#A4FFE3 on #9B4300
Aa3.73:1 Poor#00475B on #00B27D
Aa3.73:1 Poor#00B27D on #00475B

Color blindness preview

CSS variables

/* Nocturnal Expedition to Hello Winter — https://swatchly.xyz/palette/00475b-9b4300-00b27d-ffa4d9-a4ffe3 */
:root {
  --nocturnal-expedition: #00475b;
  --hot-brown: #9b4300;
  --slime-girl: #00b27d;
  --fresh-gum: #ffa4d9;
  --hello-winter: #a4ffe3;
}

Tailwind CSS v4

/* Nocturnal Expedition to Hello Winter — https://swatchly.xyz/palette/00475b-9b4300-00b27d-ffa4d9-a4ffe3 */
@theme {
  --color-nocturnal-expedition: #00475b;
  --color-nocturnal-expedition-50: #e8f8ff;
  --color-nocturnal-expedition-100: #d0f1ff;
  --color-nocturnal-expedition-200: #b4e0f1;
  --color-nocturnal-expedition-300: #97c9dd;
  --color-nocturnal-expedition-400: #71aac0;
  --color-nocturnal-expedition-500: #538ea4;
  --color-nocturnal-expedition-600: #397287;
  --color-nocturnal-expedition-700: #255a6d;
  --color-nocturnal-expedition-800: #00475b;
  --color-nocturnal-expedition-900: #0d3644;
  --color-nocturnal-expedition-950: #05212b;
  --color-hot-brown: #9b4300;
  --color-hot-brown-50: #fff2ec;
  --color-hot-brown-100: #ffe2d4;
  --color-hot-brown-200: #ffc5a7;
  --color-hot-brown-300: #f9a377;
  --color-hot-brown-400: #da7e4d;
  --color-hot-brown-500: #bb602b;
  --color-hot-brown-600: #9b4300;
  --color-hot-brown-700: #7c3400;
  --color-hot-brown-800: #622800;
  --color-hot-brown-900: #4e1e00;
  --color-hot-brown-950: #331100;
  --color-slime-girl: #00b27d;
  --color-slime-girl-50: #cdffe6;
  --color-slime-girl-100: #a9fad4;
  --color-slime-girl-200: #85e8bb;
  --color-slime-girl-300: #5bd2a0;
  --color-slime-girl-400: #00b27d;
  --color-slime-girl-500: #009568;
  --color-slime-girl-600: #007853;
  --color-slime-girl-700: #006042;
  --color-slime-girl-800: #004c33;
  --color-slime-girl-900: #003c27;
  --color-slime-girl-950: #002718;
  --color-fresh-gum: #ffa4d9;
  --color-fresh-gum-50: #fff4fa;
  --color-fresh-gum-100: #ffe6f3;
  --color-fresh-gum-200: #ffc9e7;
  --color-fresh-gum-300: #ffa4d9;
  --color-fresh-gum-400: #da86b7;
  --color-fresh-gum-500: #bd689b;
  --color-fresh-gum-600: #9e4d7f;
  --color-fresh-gum-700: #823866;
  --color-fresh-gum-800: #682850;
  --color-fresh-gum-900: #521b3e;
  --color-fresh-gum-950: #350e27;
  --color-hello-winter: #a4ffe3;
  --color-hello-winter-50: #d4fff0;
  --color-hello-winter-100: #a4ffe3;
  --color-hello-winter-200: #a5e6d1;
  --color-hello-winter-300: #86d2ba;
  --color-hello-winter-400: #5db49b;
  --color-hello-winter-500: #3b9880;
  --color-hello-winter-600: #1a7d66;
  --color-hello-winter-700: #006450;
  --color-hello-winter-800: #004f3e;
  --color-hello-winter-900: #003d30;
  --color-hello-winter-950: #00261d;
}