Waterworld to Sky Color Palette

About this palette

Waterworld to Sky is a 5-color cool, monochromatic palette: #007484 (Waterworld), #00C5E7 (Caribbean Blue), #00A3BA (True Sky Blue), #004755 (Cold and Dark), #76D9F2 (Sky). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #004755 on #76D9F2 with a contrast ratio of 6.39:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Waterworld	rgb(0, 116, 132)	hsl(187, 100%, 26%)
Caribbean Blue	rgb(0, 197, 231)	hsl(189, 100%, 45%)
True Sky Blue	rgb(0, 163, 186)	hsl(187, 100%, 36%)
Cold and Dark	rgb(0, 71, 85)	hsl(190, 100%, 17%)
Sky	rgb(118, 217, 242)	hsl(192, 83%, 71%)

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.

Aa6.39:1 Good#004755 on #76D9F2
Aa6.39:1 Good#76D9F2 on #004755
Aa4.99:1 Good#00C5E7 on #004755
Aa4.99:1 Good#004755 on #00C5E7
Aa3.42:1 Poor#00A3BA on #004755
Aa3.42:1 Poor#004755 on #00A3BA
Aa3.39:1 Poor#007484 on #76D9F2
Aa3.39:1 Poor#76D9F2 on #007484

Color blindness preview

CSS variables

/* Waterworld to Sky — https://swatchly.xyz/palette/007484-00c5e7-00a3ba-004755-76d9f2 */
:root {
  --waterworld: #007484;
  --caribbean-blue: #00c5e7;
  --true-sky-blue: #00a3ba;
  --cold-and-dark: #004755;
  --sky: #76d9f2;
}

Tailwind CSS v4

/* Waterworld to Sky — https://swatchly.xyz/palette/007484-00c5e7-00a3ba-004755-76d9f2 */
@theme {
  --color-waterworld: #007484;
  --color-waterworld-50: #e3faff;
  --color-waterworld-100: #c1f5ff;
  --color-waterworld-200: #a2e2ef;
  --color-waterworld-300: #81ccdb;
  --color-waterworld-400: #56acbd;
  --color-waterworld-500: #3290a0;
  --color-waterworld-600: #007484;
  --color-waterworld-700: #005c69;
  --color-waterworld-800: #004853;
  --color-waterworld-900: #003840;
  --color-waterworld-950: #002329;
  --color-caribbean-blue: #00c5e7;
  --color-caribbean-blue-50: #f3fcff;
  --color-caribbean-blue-100: #e0f8ff;
  --color-caribbean-blue-200: #afeeff;
  --color-caribbean-blue-300: #72e0fb;
  --color-caribbean-blue-400: #00c5e7;
  --color-caribbean-blue-500: #00a3c0;
  --color-caribbean-blue-600: #00839b;
  --color-caribbean-blue-700: #00677a;
  --color-caribbean-blue-800: #00505f;
  --color-caribbean-blue-900: #003c48;
  --color-caribbean-blue-950: #00242c;
  --color-true-sky-blue: #00a3ba;
  --color-true-sky-blue-50: #e9fbff;
  --color-true-sky-blue-100: #d2f7ff;
  --color-true-sky-blue-200: #9decfd;
  --color-true-sky-blue-300: #7ad9ec;
  --color-true-sky-blue-400: #48bdd2;
  --color-true-sky-blue-500: #00a3ba;
  --color-true-sky-blue-600: #008396;
  --color-true-sky-blue-700: #006877;
  --color-true-sky-blue-800: #00515d;
  --color-true-sky-blue-900: #003e47;
  --color-true-sky-blue-950: #00262d;
  --color-cold-and-dark: #004755;
  --color-cold-and-dark-50: #e5f9ff;
  --color-cold-and-dark-100: #cef3fd;
  --color-cold-and-dark-200: #b4e0ec;
  --color-cold-and-dark-300: #97cad8;
  --color-cold-and-dark-400: #72aaba;
  --color-cold-and-dark-500: #548e9e;
  --color-cold-and-dark-600: #397381;
  --color-cold-and-dark-700: #255a68;
  --color-cold-and-dark-800: #004755;
  --color-cold-and-dark-900: #0d363f;
  --color-cold-and-dark-950: #052128;
  --color-sky: #76d9f2;
  --color-sky-50: #f0fcff;
  --color-sky-100: #d9f7ff;
  --color-sky-200: #a9eafc;
  --color-sky-300: #76d9f2;
  --color-sky-400: #5ab7cd;
  --color-sky-500: #319ab1;
  --color-sky-600: #007d93;
  --color-sky-700: #006274;
  --color-sky-800: #004c5b;
  --color-sky-900: #003a45;
  --color-sky-950: #00242c;
}