Nordic Noir to Fish Pond Color Palette

About this palette

Nordic Noir to Fish Pond is a 5-color cool, monochromatic palette: #0A303F (Nordic Noir), #C6F0FF (Vaporised), #00677A (Teal With It), #3388A6 (Mediterranean Sea), #79CAEA (Fish Pond). It mixes blue tones and feels cool overall. The strongest text pairing is #0A303F on #C6F0FF with a contrast ratio of 11.48:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nordic Noir	rgb(10, 48, 63)	hsl(197, 73%, 14%)
Vaporised	rgb(198, 240, 255)	hsl(196, 100%, 89%)
Teal With It	rgb(0, 103, 122)	hsl(189, 100%, 24%)
Mediterranean Sea	rgb(51, 136, 166)	hsl(196, 53%, 43%)
Fish Pond	rgb(121, 202, 234)	hsl(197, 73%, 70%)

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.48:1 Very good#0A303F on #C6F0FF
Aa11.48:1 Very good#C6F0FF on #0A303F
Aa7.60:1 Very good#0A303F on #79CAEA
Aa7.60:1 Very good#79CAEA on #0A303F
Aa5.37:1 Good#C6F0FF on #00677A
Aa5.37:1 Good#00677A on #C6F0FF
Aa3.55:1 Poor#00677A on #79CAEA
Aa3.55:1 Poor#79CAEA on #00677A

Color blindness preview

CSS variables

/* Nordic Noir to Fish Pond — https://swatchly.xyz/palette/0a303f-c6f0ff-00677a-3388a6-79caea */
:root {
  --nordic-noir: #0a303f;
  --vaporised: #c6f0ff;
  --teal-with-it: #00677a;
  --mediterranean-sea: #3388a6;
  --fish-pond: #79caea;
}

Tailwind CSS v4

/* Nordic Noir to Fish Pond — https://swatchly.xyz/palette/0a303f-c6f0ff-00677a-3388a6-79caea */
@theme {
  --color-nordic-noir: #0a303f;
  --color-nordic-noir-50: #e9f8ff;
  --color-nordic-noir-100: #d7f0fc;
  --color-nordic-noir-200: #c0ddeb;
  --color-nordic-noir-300: #a6c7d7;
  --color-nordic-noir-400: #82a6b8;
  --color-nordic-noir-500: #64899b;
  --color-nordic-noir-600: #4a6d7e;
  --color-nordic-noir-700: #355564;
  --color-nordic-noir-800: #25404d;
  --color-nordic-noir-900: #0a303f;
  --color-nordic-noir-950: #0c1c23;
  --color-vaporised: #c6f0ff;
  --color-vaporised-50: #e1f7ff;
  --color-vaporised-100: #c6f0ff;
  --color-vaporised-200: #bcdbe6;
  --color-vaporised-300: #a3c5d2;
  --color-vaporised-400: #81a7b5;
  --color-vaporised-500: #658c9a;
  --color-vaporised-600: #4c727f;
  --color-vaporised-700: #395b67;
  --color-vaporised-800: #294752;
  --color-vaporised-900: #1d3740;
  --color-vaporised-950: #0f2228;
  --color-teal-with-it: #00677a;
  --color-teal-with-it-50: #e5f9ff;
  --color-teal-with-it-100: #caf4ff;
  --color-teal-with-it-200: #abe4f3;
  --color-teal-with-it-300: #8dcfe1;
  --color-teal-with-it-400: #66b2c5;
  --color-teal-with-it-500: #4698ab;
  --color-teal-with-it-600: #297d91;
  --color-teal-with-it-700: #00677a;
  --color-teal-with-it-800: #005160;
  --color-teal-with-it-900: #003e4b;
  --color-teal-with-it-950: #002730;
  --color-mediterranean-sea: #3388a6;
  --color-mediterranean-sea-50: #e4f7ff;
  --color-mediterranean-sea-100: #c8efff;
  --color-mediterranean-sea-200: #a0ddf6;
  --color-mediterranean-sea-300: #7fc6e2;
  --color-mediterranean-sea-400: #55a5c3;
  --color-mediterranean-sea-500: #3388a6;
  --color-mediterranean-sea-600: #166e8b;
  --color-mediterranean-sea-700: #005871;
  --color-mediterranean-sea-800: #00455a;
  --color-mediterranean-sea-900: #003647;
  --color-mediterranean-sea-950: #00222e;
  --color-fish-pond: #79caea;
  --color-fish-pond-50: #e4f7ff;
  --color-fish-pond-100: #cbf0ff;
  --color-fish-pond-200: #a3dff7;
  --color-fish-pond-300: #79caea;
  --color-fish-pond-400: #5daac8;
  --color-fish-pond-500: #3d8fad;
  --color-fish-pond-600: #1f7491;
  --color-fish-pond-700: #025d77;
  --color-fish-pond-800: #00495f;
  --color-fish-pond-900: #00394a;
  --color-fish-pond-950: #002330;
}