Abyssal Waters to Emerald Whispers color palette

005664Abyssal Waters 00333ENordic Noir 97C5F5Sail to the Sea 1FB7B6Super Rare Jade 2A8172Emerald Whispers

Open in generator Export PNG, PDF, ASE…

About this palette

Abyssal Waters to Emerald Whispers is a 5-color cool palette: #005664 (Abyssal Waters), #00333E (Nordic Noir), #97C5F5 (Sail to the Sea), #1FB7B6 (Super Rare Jade), #2A8172 (Emerald Whispers). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #00333E on #97C5F5 with a contrast ratio of 7.53:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Abyssal Waters	rgb(0, 86, 100)	hsl(188, 100%, 20%)
Nordic Noir	rgb(0, 51, 62)	hsl(191, 100%, 12%)
Sail to the Sea	rgb(151, 197, 245)	hsl(211, 82%, 78%)
Super Rare Jade	rgb(31, 183, 182)	hsl(180, 71%, 42%)
Emerald Whispers	rgb(42, 129, 114)	hsl(170, 51%, 34%)

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.

Aa7.53:1 Very good#00333E on #97C5F5
Aa7.53:1 Very good#97C5F5 on #00333E
Aa5.51:1 Good#00333E on #1FB7B6
Aa5.51:1 Good#1FB7B6 on #00333E
Aa4.62:1 Good#005664 on #97C5F5
Aa4.62:1 Good#97C5F5 on #005664
Aa3.38:1 Poor#005664 on #1FB7B6
Aa3.38:1 Poor#1FB7B6 on #005664

Color blindness preview

CSS variables

/* Abyssal Waters to Emerald Whispers — https://swatchly.xyz/palette/005664-00333e-97c5f5-1fb7b6-2a8172 */
:root {
  --abyssal-waters: #005664;
  --nordic-noir: #00333e;
  --sail-to-the-sea: #97c5f5;
  --super-rare-jade: #1fb7b6;
  --emerald-whispers: #2a8172;
}

Tailwind CSS v4

/* Abyssal Waters to Emerald Whispers — https://swatchly.xyz/palette/005664-00333e-97c5f5-1fb7b6-2a8172 */
@theme {
  --color-abyssal-waters: #005664;
  --color-abyssal-waters-50: #e4faff;
  --color-abyssal-waters-100: #caf4fe;
  --color-abyssal-waters-200: #ade0ec;
  --color-abyssal-waters-300: #8dc9d6;
  --color-abyssal-waters-400: #66a8b7;
  --color-abyssal-waters-500: #468b9a;
  --color-abyssal-waters-600: #2a6e7c;
  --color-abyssal-waters-700: #005664;
  --color-abyssal-waters-800: #08434d;
  --color-abyssal-waters-900: #02343d;
  --color-abyssal-waters-950: #002026;
  --color-nordic-noir: #00333e;
  --color-nordic-noir-50: #e5f9ff;
  --color-nordic-noir-100: #d4f1fa;
  --color-nordic-noir-200: #bcdee9;
  --color-nordic-noir-300: #a1c9d4;
  --color-nordic-noir-400: #7ca9b5;
  --color-nordic-noir-500: #5f8c99;
  --color-nordic-noir-600: #44707c;
  --color-nordic-noir-700: #305862;
  --color-nordic-noir-800: #20434c;
  --color-nordic-noir-900: #00333e;
  --color-nordic-noir-950: #0a1e23;
  --color-sail-to-the-sea: #97c5f5;
  --color-sail-to-the-sea-50: #edf6ff;
  --color-sail-to-the-sea-100: #dcedff;
  --color-sail-to-the-sea-200: #b9dbff;
  --color-sail-to-the-sea-300: #97c5f5;
  --color-sail-to-the-sea-400: #7aa5d2;
  --color-sail-to-the-sea-500: #5e8ab7;
  --color-sail-to-the-sea-600: #456f9a;
  --color-sail-to-the-sea-700: #31587f;
  --color-sail-to-the-sea-800: #224466;
  --color-sail-to-the-sea-900: #173551;
  --color-sail-to-the-sea-950: #0b2035;
  --color-super-rare-jade: #1fb7b6;
  --color-super-rare-jade-50: #d3fffe;
  --color-super-rare-jade-100: #b2fbf9;
  --color-super-rare-jade-200: #90e9e8;
  --color-super-rare-jade-300: #69d5d3;
  --color-super-rare-jade-400: #1fb7b6;
  --color-super-rare-jade-500: #009998;
  --color-super-rare-jade-600: #007b7b;
  --color-super-rare-jade-700: #006261;
  --color-super-rare-jade-800: #004d4c;
  --color-super-rare-jade-900: #003b3b;
  --color-super-rare-jade-950: #002525;
  --color-emerald-whispers: #2a8172;
  --color-emerald-whispers-50: #d8fff6;
  --color-emerald-whispers-100: #c8f8ed;
  --color-emerald-whispers-200: #ade7da;
  --color-emerald-whispers-300: #90d3c5;
  --color-emerald-whispers-400: #68b6a6;
  --color-emerald-whispers-500: #489b8c;
  --color-emerald-whispers-600: #2a8172;
  --color-emerald-whispers-700: #11685a;
  --color-emerald-whispers-800: #005246;
  --color-emerald-whispers-900: #003f36;
  --color-emerald-whispers-950: #002721;
}