Nordic Noir to Salty Ice Color Palette

About this palette

Nordic Noir to Salty Ice is a 5-color warm palette: #002D43 (Nordic Noir), #7E5D00 (Grizzly), #E15D67 (Lovely Little Rosy), #FF9A9A (Mad Pinker), #C3E3FF (Salty Ice). It mixes blue, brown, red, pink tones and feels warm overall. The strongest text pairing is #002D43 on #C3E3FF with a contrast ratio of 10.82:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nordic Noir	rgb(0, 45, 67)	hsl(200, 100%, 13%)
Grizzly	rgb(126, 93, 0)	hsl(44, 100%, 25%)
Lovely Little Rosy	rgb(225, 93, 103)	hsl(355, 69%, 62%)
Mad Pinker	rgb(255, 154, 154)	hsl(0, 100%, 80%)
Salty Ice	rgb(195, 227, 255)	hsl(208, 100%, 88%)

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.

Aa10.82:1 Very good#002D43 on #C3E3FF
Aa10.82:1 Very good#C3E3FF on #002D43
Aa7.10:1 Very good#002D43 on #FF9A9A
Aa7.10:1 Very good#FF9A9A on #002D43
Aa4.56:1 Good#7E5D00 on #C3E3FF
Aa4.56:1 Good#C3E3FF on #7E5D00
Aa4.09:1 Poor#002D43 on #E15D67
Aa4.09:1 Poor#E15D67 on #002D43

Color blindness preview

CSS variables

/* Nordic Noir to Salty Ice — https://swatchly.xyz/palette/002d43-7e5d00-e15d67-ff9a9a-c3e3ff */
:root {
  --nordic-noir: #002d43;
  --grizzly: #7e5d00;
  --lovely-little-rosy: #e15d67;
  --mad-pinker: #ff9a9a;
  --salty-ice: #c3e3ff;
}

Tailwind CSS v4

/* Nordic Noir to Salty Ice — https://swatchly.xyz/palette/002d43-7e5d00-e15d67-ff9a9a-c3e3ff */
@theme {
  --color-nordic-noir: #002d43;
  --color-nordic-noir-50: #ebf7ff;
  --color-nordic-noir-100: #d7efff;
  --color-nordic-noir-200: #bcddf2;
  --color-nordic-noir-300: #a2c7df;
  --color-nordic-noir-400: #7da6c0;
  --color-nordic-noir-500: #5e88a2;
  --color-nordic-noir-600: #446c84;
  --color-nordic-noir-700: #2f5368;
  --color-nordic-noir-800: #1f3e50;
  --color-nordic-noir-900: #002d43;
  --color-nordic-noir-950: #091a24;
  --color-grizzly: #7e5d00;
  --color-grizzly-50: #fff4de;
  --color-grizzly-100: #fee7b9;
  --color-grizzly-200: #ecd199;
  --color-grizzly-300: #d7b878;
  --color-grizzly-400: #b8964e;
  --color-grizzly-500: #9b792c;
  --color-grizzly-600: #7e5d00;
  --color-grizzly-700: #644900;
  --color-grizzly-800: #4f3900;
  --color-grizzly-900: #3e2c00;
  --color-grizzly-950: #271b00;
  --color-lovely-little-rosy: #e15d67;
  --color-lovely-little-rosy-50: #fff4f3;
  --color-lovely-little-rosy-100: #ffe8e8;
  --color-lovely-little-rosy-200: #ffcece;
  --color-lovely-little-rosy-300: #ffaeaf;
  --color-lovely-little-rosy-400: #fb7c83;
  --color-lovely-little-rosy-500: #e15d67;
  --color-lovely-little-rosy-600: #bf3f4c;
  --color-lovely-little-rosy-700: #9f2737;
  --color-lovely-little-rosy-800: #811427;
  --color-lovely-little-rosy-900: #66071b;
  --color-lovely-little-rosy-950: #43010d;
  --color-mad-pinker: #ff9a9a;
  --color-mad-pinker-50: #ffedec;
  --color-mad-pinker-100: #ffdedd;
  --color-mad-pinker-200: #ffc0be;
  --color-mad-pinker-300: #ff9a9a;
  --color-mad-pinker-400: #dc7d7e;
  --color-mad-pinker-500: #c06263;
  --color-mad-pinker-600: #a2494c;
  --color-mad-pinker-700: #863539;
  --color-mad-pinker-800: #6d262a;
  --color-mad-pinker-900: #581b1f;
  --color-mad-pinker-950: #3a0e11;
  --color-salty-ice: #c3e3ff;
  --color-salty-ice-50: #f6fbff;
  --color-salty-ice-100: #e6f3ff;
  --color-salty-ice-200: #c3e3ff;
  --color-salty-ice-300: #b0cae1;
  --color-salty-ice-400: #8daac3;
  --color-salty-ice-500: #708da7;
  --color-salty-ice-600: #55718a;
  --color-salty-ice-700: #40596f;
  --color-salty-ice-800: #2e4558;
  --color-salty-ice-900: #223545;
  --color-salty-ice-950: #13212c;
}