Droplet to Nordic Noir Color Palette

About this palette

Droplet to Nordic Noir is a 5-color cool, gradient palette: #A3DDFF (Droplet), #45C9D9 (Sea Serpent), #009098 (Oasis), #4A5D97 (Piccadilly Purple), #003248 (Nordic Noir). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #A3DDFF on #003248 with a contrast ratio of 9.26:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Droplet	rgb(163, 221, 255)	hsl(202, 100%, 82%)
Sea Serpent	rgb(69, 201, 217)	hsl(186, 66%, 56%)
Oasis	rgb(0, 144, 152)	hsl(183, 100%, 30%)
Piccadilly Purple	rgb(74, 93, 151)	hsl(225, 34%, 44%)
Nordic Noir	rgb(0, 50, 72)	hsl(198, 100%, 14%)

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.26:1 Very good#A3DDFF on #003248
Aa9.26:1 Very good#003248 on #A3DDFF
Aa6.85:1 Good#45C9D9 on #003248
Aa6.85:1 Good#003248 on #45C9D9
Aa4.34:1 Poor#A3DDFF on #4A5D97
Aa4.34:1 Poor#4A5D97 on #A3DDFF
Aa3.51:1 Poor#009098 on #003248
Aa3.51:1 Poor#003248 on #009098

Color blindness preview

CSS variables

/* Droplet to Nordic Noir — https://swatchly.xyz/palette/a3ddff-45c9d9-009098-4a5d97-003248 */
:root {
  --droplet: #a3ddff;
  --sea-serpent: #45c9d9;
  --oasis: #009098;
  --piccadilly-purple: #4a5d97;
  --nordic-noir: #003248;
}

Tailwind CSS v4

/* Droplet to Nordic Noir — https://swatchly.xyz/palette/a3ddff-45c9d9-009098-4a5d97-003248 */
@theme {
  --color-droplet: #a3ddff;
  --color-droplet-50: #e6f6ff;
  --color-droplet-100: #d0edff;
  --color-droplet-200: #a3ddff;
  --color-droplet-300: #95c6e3;
  --color-droplet-400: #71a7c6;
  --color-droplet-500: #548cac;
  --color-droplet-600: #3b7290;
  --color-droplet-700: #285b76;
  --color-droplet-800: #1a485f;
  --color-droplet-900: #0f374b;
  --color-droplet-950: #062231;
  --color-sea-serpent: #45c9d9;
  --color-sea-serpent-50: #caf9ff;
  --color-sea-serpent-100: #a5f2fc;
  --color-sea-serpent-200: #81deeb;
  --color-sea-serpent-300: #45c9d9;
  --color-sea-serpent-400: #1cabba;
  --color-sea-serpent-500: #008f9d;
  --color-sea-serpent-600: #00747f;
  --color-sea-serpent-700: #005d66;
  --color-sea-serpent-800: #004a52;
  --color-sea-serpent-900: #003a41;
  --color-sea-serpent-950: #002529;
  --color-oasis: #009098;
  --color-oasis-50: #d6fcff;
  --color-oasis-100: #b6f6fb;
  --color-oasis-200: #95e3e9;
  --color-oasis-300: #70cdd4;
  --color-oasis-400: #3fadb5;
  --color-oasis-500: #009098;
  --color-oasis-600: #00747b;
  --color-oasis-700: #005c62;
  --color-oasis-800: #00494d;
  --color-oasis-900: #00383c;
  --color-oasis-950: #002426;
  --color-piccadilly-purple: #4a5d97;
  --color-piccadilly-purple-50: #f1f5ff;
  --color-piccadilly-purple-100: #e3ebff;
  --color-piccadilly-purple-200: #cbd9ff;
  --color-piccadilly-purple-300: #b0c4fa;
  --color-piccadilly-purple-400: #90a6e2;
  --color-piccadilly-purple-500: #768cc9;
  --color-piccadilly-purple-600: #5e72ae;
  --color-piccadilly-purple-700: #4a5d97;
  --color-piccadilly-purple-800: #384879;
  --color-piccadilly-purple-900: #293761;
  --color-piccadilly-purple-950: #182241;
  --color-nordic-noir: #003248;
  --color-nordic-noir-50: #ebf7ff;
  --color-nordic-noir-100: #d6f0ff;
  --color-nordic-noir-200: #bbddf2;
  --color-nordic-noir-300: #a0c7df;
  --color-nordic-noir-400: #7ba7c1;
  --color-nordic-noir-500: #5e8ba4;
  --color-nordic-noir-600: #446f87;
  --color-nordic-noir-700: #2f576c;
  --color-nordic-noir-800: #204255;
  --color-nordic-noir-900: #003248;
  --color-nordic-noir-950: #0a1e28;
}