Sea Creature to Nordic Noir color palette

00566CSea Creature A5E0F5Distant Homeworld 25BEE0Caribbean Blue 00849EAhoy! Blue 003343Nordic Noir

About this palette

Sea Creature to Nordic Noir is a 5-color cool, monochromatic palette: #00566C (Sea Creature), #A5E0F5 (Distant Homeworld), #25BEE0 (Caribbean Blue), #00849E (Ahoy! Blue), #003343 (Nordic Noir). It mixes blue tones and feels cool overall. The strongest text pairing is #A5E0F5 on #003343 with a contrast ratio of 9.38:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea Creature	rgb(0, 86, 108)	hsl(192, 100%, 21%)
Distant Homeworld	rgb(165, 224, 245)	hsl(196, 80%, 80%)
Caribbean Blue	rgb(37, 190, 224)	hsl(191, 75%, 51%)
Ahoy! Blue	rgb(0, 132, 158)	hsl(190, 100%, 31%)
Nordic Noir	rgb(0, 51, 67)	hsl(194, 100%, 13%)

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.38:1 Very good#A5E0F5 on #003343
Aa9.38:1 Very good#003343 on #A5E0F5
Aa6.12:1 Good#25BEE0 on #003343
Aa6.12:1 Good#003343 on #25BEE0
Aa5.72:1 Good#00566C on #A5E0F5
Aa5.72:1 Good#A5E0F5 on #00566C
Aa3.74:1 Poor#00566C on #25BEE0
Aa3.74:1 Poor#25BEE0 on #00566C

Color blindness preview

CSS variables

/* Sea Creature to Nordic Noir — https://swatchly.xyz/palette/00566c-a5e0f5-25bee0-00849e-003343 */
:root {
  --sea-creature: #00566c;
  --distant-homeworld: #a5e0f5;
  --caribbean-blue: #25bee0;
  --ahoy-blue: #00849e;
  --nordic-noir: #003343;
}

Tailwind CSS v4

/* Sea Creature to Nordic Noir — https://swatchly.xyz/palette/00566c-a5e0f5-25bee0-00849e-003343 */
@theme {
  --color-sea-creature: #00566c;
  --color-sea-creature-50: #e8f8ff;
  --color-sea-creature-100: #cff2ff;
  --color-sea-creature-200: #acdff2;
  --color-sea-creature-300: #8dc8de;
  --color-sea-creature-400: #65a8bf;
  --color-sea-creature-500: #468ba2;
  --color-sea-creature-600: #2a6e84;
  --color-sea-creature-700: #00566c;
  --color-sea-creature-800: #074354;
  --color-sea-creature-900: #013442;
  --color-sea-creature-950: #00202a;
  --color-distant-homeworld: #a5e0f5;
  --color-distant-homeworld-50: #e4f8ff;
  --color-distant-homeworld-100: #ccf0fe;
  --color-distant-homeworld-200: #a5e0f5;
  --color-distant-homeworld-300: #97c8da;
  --color-distant-homeworld-400: #73aabd;
  --color-distant-homeworld-500: #568fa2;
  --color-distant-homeworld-600: #3c7486;
  --color-distant-homeworld-700: #285d6d;
  --color-distant-homeworld-800: #1a4958;
  --color-distant-homeworld-900: #103845;
  --color-distant-homeworld-950: #06232c;
  --color-caribbean-blue: #25bee0;
  --color-caribbean-blue-50: #effbff;
  --color-caribbean-blue-100: #daf6ff;
  --color-caribbean-blue-200: #a6ebff;
  --color-caribbean-blue-300: #73daf6;
  --color-caribbean-blue-400: #25bee0;
  --color-caribbean-blue-500: #009ebd;
  --color-caribbean-blue-600: #007f98;
  --color-caribbean-blue-700: #006479;
  --color-caribbean-blue-800: #004e5e;
  --color-caribbean-blue-900: #003b48;
  --color-caribbean-blue-950: #00242d;
  --color-ahoy-blue: #00849e;
  --color-ahoy-blue-50: #e6f9ff;
  --color-ahoy-blue-100: #d1f4ff;
  --color-ahoy-blue-200: #a4e8fc;
  --color-ahoy-blue-300: #85d4eb;
  --color-ahoy-blue-400: #5ab8d1;
  --color-ahoy-blue-500: #349eb8;
  --color-ahoy-blue-600: #00849e;
  --color-ahoy-blue-700: #00697e;
  --color-ahoy-blue-800: #005263;
  --color-ahoy-blue-900: #003f4c;
  --color-ahoy-blue-950: #002731;
  --color-nordic-noir: #003343;
  --color-nordic-noir-50: #e8f8ff;
  --color-nordic-noir-100: #d3f1fd;
  --color-nordic-noir-200: #bbdeed;
  --color-nordic-noir-300: #a0c8d9;
  --color-nordic-noir-400: #7ca8bb;
  --color-nordic-noir-500: #5e8c9e;
  --color-nordic-noir-600: #447081;
  --color-nordic-noir-700: #305767;
  --color-nordic-noir-800: #204350;
  --color-nordic-noir-900: #003343;
  --color-nordic-noir-950: #0a1e26;
}