Aqua to Forget-Me-Not Color Palette

About this palette

Aqua to Forget-Me-Not is a 5-color cool palette: #00EEF9 (Aqua), #00444B (Cold and Dark), #006C8C (Copacabana), #8EADF7 (Kitten’s Eye), #0087C0 (Forget-Me-Not). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #00EEF9 on #00444B with a contrast ratio of 7.57:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Aqua	rgb(0, 238, 249)	hsl(183, 100%, 49%)
Cold and Dark	rgb(0, 68, 75)	hsl(186, 100%, 15%)
Copacabana	rgb(0, 108, 140)	hsl(194, 100%, 27%)
Kitten’s Eye	rgb(142, 173, 247)	hsl(222, 87%, 76%)
Forget-Me-Not	rgb(0, 135, 192)	hsl(198, 100%, 38%)

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.57:1 Very good#00EEF9 on #00444B
Aa7.57:1 Very good#00444B on #00EEF9
Aa4.91:1 Good#00444B on #8EADF7
Aa4.91:1 Good#8EADF7 on #00444B
Aa4.14:1 Poor#00EEF9 on #006C8C
Aa4.14:1 Poor#006C8C on #00EEF9

Color blindness preview

CSS variables

/* Aqua to Forget-Me-Not — https://swatchly.xyz/palette/00eef9-00444b-006c8c-8eadf7-0087c0 */
:root {
  --aqua: #00eef9;
  --cold-and-dark: #00444b;
  --copacabana: #006c8c;
  --kitten-s-eye: #8eadf7;
  --forget-me-not: #0087c0;
}

Tailwind CSS v4

/* Aqua to Forget-Me-Not — https://swatchly.xyz/palette/00eef9-00444b-006c8c-8eadf7-0087c0 */
@theme {
  --color-aqua: #00eef9;
  --color-aqua-50: #cbfcff;
  --color-aqua-100: #9bf9ff;
  --color-aqua-200: #00eef9;
  --color-aqua-300: #2cd5de;
  --color-aqua-400: #00b4bc;
  --color-aqua-500: #00969d;
  --color-aqua-600: #00797f;
  --color-aqua-700: #006166;
  --color-aqua-800: #004c50;
  --color-aqua-900: #003b3e;
  --color-aqua-950: #002527;
  --color-cold-and-dark: #00444b;
  --color-cold-and-dark-50: #dffbff;
  --color-cold-and-dark-100: #cff3f8;
  --color-cold-and-dark-200: #b6e1e6;
  --color-cold-and-dark-300: #99cad0;
  --color-cold-and-dark-400: #73aab1;
  --color-cold-and-dark-500: #548d94;
  --color-cold-and-dark-600: #3a7078;
  --color-cold-and-dark-700: #25585e;
  --color-cold-and-dark-800: #00444b;
  --color-cold-and-dark-900: #0e3338;
  --color-cold-and-dark-950: #051f22;
  --color-copacabana: #006c8c;
  --color-copacabana-50: #e9f8ff;
  --color-copacabana-100: #cef0ff;
  --color-copacabana-200: #a0def9;
  --color-copacabana-300: #7fc7e6;
  --color-copacabana-400: #54a6c7;
  --color-copacabana-500: #3189aa;
  --color-copacabana-600: #006c8c;
  --color-copacabana-700: #005670;
  --color-copacabana-800: #004358;
  --color-copacabana-900: #003445;
  --color-copacabana-950: #00202d;
  --color-kitten-s-eye: #8eadf7;
  --color-kitten-s-eye-50: #f8faff;
  --color-kitten-s-eye-100: #edf2ff;
  --color-kitten-s-eye-200: #d4e1ff;
  --color-kitten-s-eye-300: #b6ccff;
  --color-kitten-s-eye-400: #8eadf7;
  --color-kitten-s-eye-500: #718fd6;
  --color-kitten-s-eye-600: #5671b6;
  --color-kitten-s-eye-700: #3f5897;
  --color-kitten-s-eye-800: #2e437a;
  --color-kitten-s-eye-900: #203260;
  --color-kitten-s-eye-950: #111d3d;
  --color-forget-me-not: #0087c0;
  --color-forget-me-not-50: #e8f6ff;
  --color-forget-me-not-100: #d1edff;
  --color-forget-me-not-200: #a3dbff;
  --color-forget-me-not-300: #6ec5fa;
  --color-forget-me-not-400: #3ca5de;
  --color-forget-me-not-500: #0087c0;
  --color-forget-me-not-600: #006d9c;
  --color-forget-me-not-700: #00567d;
  --color-forget-me-not-800: #004463;
  --color-forget-me-not-900: #00354e;
  --color-forget-me-not-950: #002133;
}