Nordic Noir to Alpine Expedition color palette

083743Nordic Noir 006D85Waterworld BF775EHimalayan Salt E68671Redolenc 95E9F9Alpine Expedition

About this palette

Nordic Noir to Alpine Expedition is a 5-color cool, vintage palette: #083743 (Nordic Noir), #006D85 (Waterworld), #BF775E (Himalayan Salt), #E68671 (Redolenc), #95E9F9 (Alpine Expedition). It mixes blue, red, turquoise tones and feels cool overall. The strongest text pairing is #083743 on #95E9F9 with a contrast ratio of 9.34:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nordic Noir	rgb(8, 55, 67)	hsl(192, 79%, 15%)
Waterworld	rgb(0, 109, 133)	hsl(191, 100%, 26%)
Himalayan Salt	rgb(191, 119, 94)	hsl(15, 43%, 56%)
Redolenc	rgb(230, 134, 113)	hsl(11, 70%, 67%)
Alpine Expedition	rgb(149, 233, 249)	hsl(190, 89%, 78%)

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.

Aa9.34:1 Very good#083743 on #95E9F9
Aa9.34:1 Very good#95E9F9 on #083743
Aa4.89:1 Good#083743 on #E68671
Aa4.89:1 Good#E68671 on #083743
Aa4.34:1 Poor#006D85 on #95E9F9
Aa4.34:1 Poor#95E9F9 on #006D85
Aa3.67:1 Poor#083743 on #BF775E
Aa3.67:1 Poor#BF775E on #083743

Color blindness preview

CSS variables

/* Nordic Noir to Alpine Expedition — https://swatchly.xyz/palette/083743-006d85-bf775e-e68671-95e9f9 */
:root {
  --nordic-noir: #083743;
  --waterworld: #006d85;
  --himalayan-salt: #bf775e;
  --redolenc: #e68671;
  --alpine-expedition: #95e9f9;
}

Tailwind CSS v4

/* Nordic Noir to Alpine Expedition — https://swatchly.xyz/palette/083743-006d85-bf775e-e68671-95e9f9 */
@theme {
  --color-nordic-noir: #083743;
  --color-nordic-noir-50: #e6f9ff;
  --color-nordic-noir-100: #d5f1fa;
  --color-nordic-noir-200: #bddee9;
  --color-nordic-noir-300: #a2c8d5;
  --color-nordic-noir-400: #7fa9b7;
  --color-nordic-noir-500: #628d9b;
  --color-nordic-noir-600: #48727f;
  --color-nordic-noir-700: #345a66;
  --color-nordic-noir-800: #244651;
  --color-nordic-noir-900: #083743;
  --color-nordic-noir-950: #0c2127;
  --color-waterworld: #006d85;
  --color-waterworld-50: #e7f9ff;
  --color-waterworld-100: #c8f1ff;
  --color-waterworld-200: #a1dff3;
  --color-waterworld-300: #7fc8df;
  --color-waterworld-400: #55a7c0;
  --color-waterworld-500: #318aa2;
  --color-waterworld-600: #006d85;
  --color-waterworld-700: #00566a;
  --color-waterworld-800: #004454;
  --color-waterworld-900: #003442;
  --color-waterworld-950: #00212a;
  --color-himalayan-salt: #bf775e;
  --color-himalayan-salt-50: #fff3ef;
  --color-himalayan-salt-100: #ffe8e0;
  --color-himalayan-salt-200: #ffcebd;
  --color-himalayan-salt-300: #f4b49d;
  --color-himalayan-salt-400: #d9937a;
  --color-himalayan-salt-500: #bf775e;
  --color-himalayan-salt-600: #a05c44;
  --color-himalayan-salt-700: #84452f;
  --color-himalayan-salt-800: #6a3320;
  --color-himalayan-salt-900: #532515;
  --color-himalayan-salt-950: #361509;
  --color-redolenc: #e68671;
  --color-redolenc-50: #fff3f0;
  --color-redolenc-100: #ffe6e0;
  --color-redolenc-200: #ffcbc0;
  --color-redolenc-300: #ffaa98;
  --color-redolenc-400: #e68671;
  --color-redolenc-500: #c76a56;
  --color-redolenc-600: #a84f3d;
  --color-redolenc-700: #8a3a29;
  --color-redolenc-800: #70291b;
  --color-redolenc-900: #591d11;
  --color-redolenc-950: #3a0f07;
  --color-alpine-expedition: #95e9f9;
  --color-alpine-expedition-50: #e6fbff;
  --color-alpine-expedition-100: #c9f6ff;
  --color-alpine-expedition-200: #95e9f9;
  --color-alpine-expedition-300: #8bcfdd;
  --color-alpine-expedition-400: #61b1bf;
  --color-alpine-expedition-500: #3f95a4;
  --color-alpine-expedition-600: #207987;
  --color-alpine-expedition-700: #01616e;
  --color-alpine-expedition-800: #004b56;
  --color-alpine-expedition-900: #003a43;
  --color-alpine-expedition-950: #00242a;
}