Nordic Noir to Atlantis Color Palette

About this palette

Nordic Noir to Atlantis is a 4-color dark, cool palette: #16303F (Nordic Noir), #030717 (Narwhal Grey), #00514B (Cape Verde), #316479 (Atlantis). It mixes blue, black, turquoise tones and feels cool overall. The strongest text pairing is #030717 on #316479 with a contrast ratio of 3.09:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nordic Noir	rgb(22, 48, 63)	hsl(202, 48%, 17%)
Narwhal Grey	rgb(3, 7, 23)	hsl(228, 77%, 5%)
Cape Verde	rgb(0, 81, 75)	hsl(176, 100%, 16%)
Atlantis	rgb(49, 100, 121)	hsl(198, 42%, 33%)

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.

Aa3.09:1 Poor#030717 on #316479
Aa3.09:1 Poor#316479 on #030717

Color blindness preview

CSS variables

/* Nordic Noir to Atlantis — https://swatchly.xyz/palette/16303f-030717-00514b-316479 */
:root {
  --nordic-noir: #16303f;
  --narwhal-grey: #030717;
  --cape-verde: #00514b;
  --atlantis: #316479;
}

Tailwind CSS v4

/* Nordic Noir to Atlantis — https://swatchly.xyz/palette/16303f-030717-00514b-316479 */
@theme {
  --color-nordic-noir: #16303f;
  --color-nordic-noir-50: #ebf7ff;
  --color-nordic-noir-100: #dbeefb;
  --color-nordic-noir-200: #c5dbea;
  --color-nordic-noir-300: #acc5d5;
  --color-nordic-noir-400: #89a5b6;
  --color-nordic-noir-500: #6c889a;
  --color-nordic-noir-600: #526c7d;
  --color-nordic-noir-700: #3c5463;
  --color-nordic-noir-800: #2b404d;
  --color-nordic-noir-900: #16303f;
  --color-nordic-noir-950: #101c23;
  --color-narwhal-grey: #030717;
  --color-narwhal-grey-50: #f1f5ff;
  --color-narwhal-grey-100: #e4ebfb;
  --color-narwhal-grey-200: #cfd8ea;
  --color-narwhal-grey-300: #b7c1d6;
  --color-narwhal-grey-400: #97a2b9;
  --color-narwhal-grey-500: #768198;
  --color-narwhal-grey-600: #586277;
  --color-narwhal-grey-700: #3f4759;
  --color-narwhal-grey-800: #2a303e;
  --color-narwhal-grey-900: #191d27;
  --color-narwhal-grey-950: #030717;
  --color-cape-verde: #00514b;
  --color-cape-verde-50: #dafef9;
  --color-cape-verde-100: #cdf5ef;
  --color-cape-verde-200: #b2e3dc;
  --color-cape-verde-300: #97cec7;
  --color-cape-verde-400: #72b0a9;
  --color-cape-verde-500: #54968e;
  --color-cape-verde-600: #3a7b74;
  --color-cape-verde-700: #25635d;
  --color-cape-verde-800: #00514b;
  --color-cape-verde-900: #0b3e39;
  --color-cape-verde-950: #032724;
  --color-atlantis: #316479;
  --color-atlantis-50: #e9f8ff;
  --color-atlantis-100: #d2f1ff;
  --color-atlantis-200: #b9e0f1;
  --color-atlantis-300: #a0cbdf;
  --color-atlantis-400: #7daec4;
  --color-atlantis-500: #6194aa;
  --color-atlantis-600: #487a8f;
  --color-atlantis-700: #316479;
  --color-atlantis-800: #234e60;
  --color-atlantis-900: #173c4b;
  --color-atlantis-950: #0a2631;
}