Nocturnal Expedition to Elite Teal color palette

004C52Nocturnal Expedition 8DCFD4Water Nymph 008594Cruising 58ACBCFinnish Fiord ADF2FDIce Citadel 003034Elite Teal

Open in generator Export PNG, PDF, ASE…

About this palette

Nocturnal Expedition to Elite Teal is a 6-color cool, monochromatic palette: #004C52 (Nocturnal Expedition), #8DCFD4 (Water Nymph), #008594 (Cruising), #58ACBC (Finnish Fiord), #ADF2FD (Ice Citadel), #003034 (Elite Teal). It mixes turquoise tones and feels cool overall. The strongest text pairing is #ADF2FD on #003034 with a contrast ratio of 11.48:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nocturnal Expedition	rgb(0, 76, 82)	hsl(184, 100%, 16%)
Water Nymph	rgb(141, 207, 212)	hsl(184, 45%, 69%)
Cruising	rgb(0, 133, 148)	hsl(186, 100%, 29%)
Finnish Fiord	rgb(88, 172, 188)	hsl(190, 43%, 54%)
Ice Citadel	rgb(173, 242, 253)	hsl(188, 95%, 84%)
Elite Teal	rgb(0, 48, 52)	hsl(185, 100%, 10%)

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#ADF2FD on #003034
Aa11.48:1 Very good#003034 on #ADF2FD
Aa8.16:1 Very good#8DCFD4 on #003034
Aa8.16:1 Very good#003034 on #8DCFD4
Aa7.84:1 Very good#004C52 on #ADF2FD
Aa7.84:1 Very good#ADF2FD on #004C52
Aa5.57:1 Good#004C52 on #8DCFD4
Aa5.57:1 Good#8DCFD4 on #004C52

Color blindness preview

CSS variables

/* Nocturnal Expedition to Elite Teal — https://swatchly.xyz/palette/004c52-8dcfd4-008594-58acbc-adf2fd-003034 */
:root {
  --nocturnal-expedition: #004c52;
  --water-nymph: #8dcfd4;
  --cruising: #008594;
  --finnish-fiord: #58acbc;
  --ice-citadel: #adf2fd;
  --elite-teal: #003034;
}

Tailwind CSS v4

/* Nocturnal Expedition to Elite Teal — https://swatchly.xyz/palette/004c52-8dcfd4-008594-58acbc-adf2fd-003034 */
@theme {
  --color-nocturnal-expedition: #004c52;
  --color-nocturnal-expedition-50: #ddfcff;
  --color-nocturnal-expedition-100: #cdf4f7;
  --color-nocturnal-expedition-200: #b3e1e6;
  --color-nocturnal-expedition-300: #97ccd1;
  --color-nocturnal-expedition-400: #72adb3;
  --color-nocturnal-expedition-500: #549298;
  --color-nocturnal-expedition-600: #3a777d;
  --color-nocturnal-expedition-700: #255f64;
  --color-nocturnal-expedition-800: #004c52;
  --color-nocturnal-expedition-900: #0c3a3e;
  --color-nocturnal-expedition-950: #042427;
  --color-water-nymph: #8dcfd4;
  --color-water-nymph-50: #ddfdff;
  --color-water-nymph-100: #cdf4f7;
  --color-water-nymph-200: #b3e2e6;
  --color-water-nymph-300: #8dcfd4;
  --color-water-nymph-400: #70aeb3;
  --color-water-nymph-500: #529398;
  --color-water-nymph-600: #37787c;
  --color-water-nymph-700: #236064;
  --color-water-nymph-800: #134b4f;
  --color-water-nymph-900: #093a3e;
  --color-water-nymph-950: #032527;
  --color-cruising: #008594;
  --color-cruising-50: #e1fbff;
  --color-cruising-100: #c7f7ff;
  --color-cruising-200: #a4e9f4;
  --color-cruising-300: #85d5e2;
  --color-cruising-400: #5ab9c7;
  --color-cruising-500: #349fae;
  --color-cruising-600: #008594;
  --color-cruising-700: #006a76;
  --color-cruising-800: #00525c;
  --color-cruising-900: #003f47;
  --color-cruising-950: #00282d;
  --color-finnish-fiord: #58acbc;
  --color-finnish-fiord-50: #dff9ff;
  --color-finnish-fiord-100: #c1f3fe;
  --color-finnish-fiord-200: #a4e1ed;
  --color-finnish-fiord-300: #84cbd9;
  --color-finnish-fiord-400: #58acbc;
  --color-finnish-fiord-500: #3b91a0;
  --color-finnish-fiord-600: #1c7685;
  --color-finnish-fiord-700: #005f6c;
  --color-finnish-fiord-800: #004a55;
  --color-finnish-fiord-900: #003a42;
  --color-finnish-fiord-950: #00242b;
  --color-ice-citadel: #adf2fd;
  --color-ice-citadel-50: #d1f8fe;
  --color-ice-citadel-100: #adf2fd;
  --color-ice-citadel-200: #a9dce5;
  --color-ice-citadel-300: #8ec8d1;
  --color-ice-citadel-400: #6aaab5;
  --color-ice-citadel-500: #4d909a;
  --color-ice-citadel-600: #337680;
  --color-ice-citadel-700: #1f5f68;
  --color-ice-citadel-800: #104b53;
  --color-ice-citadel-900: #063a41;
  --color-ice-citadel-950: #012429;
  --color-elite-teal: #003034;
  --color-elite-teal-50: #e2fbfd;
  --color-elite-teal-100: #d5f1f4;
  --color-elite-teal-200: #bddfe2;
  --color-elite-teal-300: #a3c9cd;
  --color-elite-teal-400: #7ea8ad;
  --color-elite-teal-500: #608b8f;
  --color-elite-teal-600: #456e72;
  --color-elite-teal-700: #305559;
  --color-elite-teal-800: #204043;
  --color-elite-teal-900: #003034;
  --color-elite-teal-950: #091b1d;
}