Sea Paint to Nordic Noir Color Palette

About this palette

Sea Paint to Nordic Noir is a 5-color dark, cool palette: #004C72 (Sea Paint), #130714 (Noir Fiction), #794494 (Purple Pleasures), #001C39 (Naval Night), #003342 (Nordic Noir). It mixes blue, black, purple tones and feels cool overall. The strongest text pairing is #130714 on #794494 with a contrast ratio of 2.87:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea Paint	rgb(0, 76, 114)	hsl(200, 100%, 22%)
Noir Fiction	rgb(19, 7, 20)	hsl(295, 48%, 5%)
Purple Pleasures	rgb(121, 68, 148)	hsl(280, 37%, 42%)
Naval Night	rgb(0, 28, 57)	hsl(211, 100%, 11%)
Nordic Noir	rgb(0, 51, 66)	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.

Color blindness preview

CSS variables

/* Sea Paint to Nordic Noir — https://swatchly.xyz/palette/004c72-130714-794494-001c39-003342 */
:root {
  --sea-paint: #004c72;
  --noir-fiction: #130714;
  --purple-pleasures: #794494;
  --naval-night: #001c39;
  --nordic-noir: #003342;
}

Tailwind CSS v4

/* Sea Paint to Nordic Noir — https://swatchly.xyz/palette/004c72-130714-794494-001c39-003342 */
@theme {
  --color-sea-paint: #004c72;
  --color-sea-paint-50: #ecf7ff;
  --color-sea-paint-100: #d9efff;
  --color-sea-paint-200: #b0deff;
  --color-sea-paint-300: #94c9ef;
  --color-sea-paint-400: #6fabd4;
  --color-sea-paint-500: #5290ba;
  --color-sea-paint-600: #38769e;
  --color-sea-paint-700: #245f84;
  --color-sea-paint-800: #004c72;
  --color-sea-paint-900: #0a3a56;
  --color-sea-paint-950: #032539;
  --color-noir-fiction: #130714;
  --color-noir-fiction-50: #fcf1fc;
  --color-noir-fiction-100: #f3e7f3;
  --color-noir-fiction-200: #e0d2e1;
  --color-noir-fiction-300: #cbbbcb;
  --color-noir-fiction-400: #ac9bad;
  --color-noir-fiction-500: #8c7b8d;
  --color-noir-fiction-600: #6d5e6e;
  --color-noir-fiction-700: #524453;
  --color-noir-fiction-800: #3a2f3b;
  --color-noir-fiction-900: #261e27;
  --color-noir-fiction-950: #130714;
  --color-purple-pleasures: #794494;
  --color-purple-pleasures-50: #faf1ff;
  --color-purple-pleasures-100: #f5e4ff;
  --color-purple-pleasures-200: #eccbff;
  --color-purple-pleasures-300: #deaff9;
  --color-purple-pleasures-400: #c38ee0;
  --color-purple-pleasures-500: #a973c6;
  --color-purple-pleasures-600: #8f5aab;
  --color-purple-pleasures-700: #794494;
  --color-purple-pleasures-800: #603377;
  --color-purple-pleasures-900: #4b245f;
  --color-purple-pleasures-950: #31143f;
  --color-naval-night: #001c39;
  --color-naval-night-50: #eef6ff;
  --color-naval-night-100: #ddedff;
  --color-naval-night-200: #c1daf8;
  --color-naval-night-300: #a7c4e5;
  --color-naval-night-400: #85a5c8;
  --color-naval-night-500: #6888ac;
  --color-naval-night-600: #4e6d8f;
  --color-naval-night-700: #395574;
  --color-naval-night-800: #29415c;
  --color-naval-night-900: #1d3147;
  --color-naval-night-950: #001c39;
  --color-nordic-noir: #003342;
  --color-nordic-noir-50: #e8f8ff;
  --color-nordic-noir-100: #d4f1fd;
  --color-nordic-noir-200: #bbdeec;
  --color-nordic-noir-300: #a0c8d8;
  --color-nordic-noir-400: #7ca8b9;
  --color-nordic-noir-500: #5e8c9d;
  --color-nordic-noir-600: #447080;
  --color-nordic-noir-700: #305866;
  --color-nordic-noir-800: #20434f;
  --color-nordic-noir-900: #003342;
  --color-nordic-noir-950: #0a1e25;
}