Nordic Noir to Water color palette

003042Nordic Noir 00536APlunge 007A9BPristine Seas 3A9DC1Blue Ocean 8FD3F8Fail Whale DAF1FFWater

Open in generator Export PNG, PDF, ASE…

About this palette

Nordic Noir to Water is a 6-color cool, monochromatic, gradient palette: #003042 (Nordic Noir), #00536A (Plunge), #007A9B (Pristine Seas), #3A9DC1 (Blue Ocean), #8FD3F8 (Fail Whale), #DAF1FF (Water). It mixes blue, white tones and feels cool overall. The strongest text pairing is #003042 on #DAF1FF with a contrast ratio of 11.99:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nordic Noir	rgb(0, 48, 66)	hsl(196, 100%, 13%)
Plunge	rgb(0, 83, 106)	hsl(193, 100%, 21%)
Pristine Seas	rgb(0, 122, 155)	hsl(193, 100%, 30%)
Blue Ocean	rgb(58, 157, 193)	hsl(196, 54%, 49%)
Fail Whale	rgb(143, 211, 248)	hsl(201, 88%, 77%)
Water	rgb(218, 241, 255)	hsl(203, 100%, 93%)

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.

Aa11.99:1 Very good#003042 on #DAF1FF
Aa11.99:1 Very good#DAF1FF on #003042
Aa8.55:1 Very good#003042 on #8FD3F8
Aa8.55:1 Very good#8FD3F8 on #003042
Aa7.36:1 Very good#00536A on #DAF1FF
Aa7.36:1 Very good#DAF1FF on #00536A
Aa5.25:1 Good#00536A on #8FD3F8
Aa5.25:1 Good#8FD3F8 on #00536A

Color blindness preview

CSS variables

/* Nordic Noir to Water — https://swatchly.xyz/palette/003042-00536a-007a9b-3a9dc1-8fd3f8-daf1ff */
:root {
  --nordic-noir: #003042;
  --plunge: #00536a;
  --pristine-seas: #007a9b;
  --blue-ocean: #3a9dc1;
  --fail-whale: #8fd3f8;
  --water: #daf1ff;
}

Tailwind CSS v4

/* Nordic Noir to Water — https://swatchly.xyz/palette/003042-00536a-007a9b-3a9dc1-8fd3f8-daf1ff */
@theme {
  --color-nordic-noir: #003042;
  --color-nordic-noir-50: #eaf8ff;
  --color-nordic-noir-100: #d4f0ff;
  --color-nordic-noir-200: #bcddee;
  --color-nordic-noir-300: #a1c8db;
  --color-nordic-noir-400: #7ca7bc;
  --color-nordic-noir-500: #5e8a9f;
  --color-nordic-noir-600: #446e82;
  --color-nordic-noir-700: #2f5567;
  --color-nordic-noir-800: #20404f;
  --color-nordic-noir-900: #003042;
  --color-nordic-noir-950: #091c24;
  --color-plunge: #00536a;
  --color-plunge-50: #e8f8ff;
  --color-plunge-100: #d0f1ff;
  --color-plunge-200: #afe0f4;
  --color-plunge-300: #94cce3;
  --color-plunge-400: #70afc8;
  --color-plunge-500: #5395ae;
  --color-plunge-600: #387b93;
  --color-plunge-700: #24657b;
  --color-plunge-800: #00536a;
  --color-plunge-900: #084051;
  --color-plunge-950: #012936;
  --color-pristine-seas: #007a9b;
  --color-pristine-seas-50: #e8f8ff;
  --color-pristine-seas-100: #d2f2ff;
  --color-pristine-seas-200: #a2e4fe;
  --color-pristine-seas-300: #82cfed;
  --color-pristine-seas-400: #57b0d2;
  --color-pristine-seas-500: #3295b7;
  --color-pristine-seas-600: #007a9b;
  --color-pristine-seas-700: #00617c;
  --color-pristine-seas-800: #004c61;
  --color-pristine-seas-900: #003a4c;
  --color-pristine-seas-950: #002431;
  --color-blue-ocean: #3a9dc1;
  --color-blue-ocean-50: #edf9ff;
  --color-blue-ocean-100: #daf4ff;
  --color-blue-ocean-200: #aee7ff;
  --color-blue-ocean-300: #89d4f3;
  --color-blue-ocean-400: #5fb7d9;
  --color-blue-ocean-500: #3a9dc1;
  --color-blue-ocean-600: #0e80a2;
  --color-blue-ocean-700: #006582;
  --color-blue-ocean-800: #004f66;
  --color-blue-ocean-900: #003c4f;
  --color-blue-ocean-950: #002532;
  --color-fail-whale: #8fd3f8;
  --color-fail-whale-50: #f3fbff;
  --color-fail-whale-100: #e1f4ff;
  --color-fail-whale-200: #b9e6ff;
  --color-fail-whale-300: #8fd3f8;
  --color-fail-whale-400: #72b1d3;
  --color-fail-whale-500: #5194b7;
  --color-fail-whale-600: #357899;
  --color-fail-whale-700: #1e5f7d;
  --color-fail-whale-800: #0e4964;
  --color-fail-whale-900: #04384e;
  --color-fail-whale-950: #002333;
  --color-water: #daf1ff;
  --color-water-50: #eef9ff;
  --color-water-100: #daf1ff;
  --color-water-200: #cbdce6;
  --color-water-300: #b3c5d1;
  --color-water-400: #91a6b2;
  --color-water-500: #758a97;
  --color-water-600: #5b6f7b;
  --color-water-700: #465863;
  --color-water-800: #35454e;
  --color-water-900: #28353d;
  --color-water-950: #172126;
}