Swimmer to Cape Verde Color Palette

About this palette

Swimmer to Cape Verde is a 5-color cool palette: #318CB7 (Swimmer), #85E8E9 (Bath Water), #8CB6ED (Electric Eel), #3E6C7F (Crashing Waves), #005954 (Cape Verde). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #85E8E9 on #005954 with a contrast ratio of 5.76:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Swimmer	rgb(49, 140, 183)	hsl(199, 58%, 45%)
Bath Water	rgb(133, 232, 233)	hsl(181, 69%, 72%)
Electric Eel	rgb(140, 182, 237)	hsl(214, 73%, 74%)
Crashing Waves	rgb(62, 108, 127)	hsl(198, 34%, 37%)
Cape Verde	rgb(0, 89, 84)	hsl(177, 100%, 17%)

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.

Aa5.76:1 Good#85E8E9 on #005954
Aa5.76:1 Good#005954 on #85E8E9
Aa4.02:1 Poor#85E8E9 on #3E6C7F
Aa4.02:1 Poor#3E6C7F on #85E8E9
Aa3.92:1 Poor#8CB6ED on #005954
Aa3.92:1 Poor#005954 on #8CB6ED

Color blindness preview

CSS variables

/* Swimmer to Cape Verde — https://swatchly.xyz/palette/318cb7-85e8e9-8cb6ed-3e6c7f-005954 */
:root {
  --swimmer: #318cb7;
  --bath-water: #85e8e9;
  --electric-eel: #8cb6ed;
  --crashing-waves: #3e6c7f;
  --cape-verde: #005954;
}

Tailwind CSS v4

/* Swimmer to Cape Verde — https://swatchly.xyz/palette/318cb7-85e8e9-8cb6ed-3e6c7f-005954 */
@theme {
  --color-swimmer: #318cb7;
  --color-swimmer-50: #e9f7ff;
  --color-swimmer-100: #d2efff;
  --color-swimmer-200: #a4deff;
  --color-swimmer-300: #7fc8f0;
  --color-swimmer-400: #55a9d3;
  --color-swimmer-500: #318cb7;
  --color-swimmer-600: #0d719a;
  --color-swimmer-700: #005a7d;
  --color-swimmer-800: #004763;
  --color-swimmer-900: #00374d;
  --color-swimmer-950: #002232;
  --color-bath-water: #85e8e9;
  --color-bath-water-50: #cbffff;
  --color-bath-water-100: #bbf6f6;
  --color-bath-water-200: #85e8e9;
  --color-bath-water-300: #7ccfd0;
  --color-bath-water-400: #51b1b2;
  --color-bath-water-500: #2b9697;
  --color-bath-water-600: #007b7c;
  --color-bath-water-700: #006263;
  --color-bath-water-800: #004d4e;
  --color-bath-water-900: #003b3c;
  --color-bath-water-950: #002526;
  --color-electric-eel: #8cb6ed;
  --color-electric-eel-50: #e3efff;
  --color-electric-eel-100: #cfe4ff;
  --color-electric-eel-200: #accffc;
  --color-electric-eel-300: #8cb6ed;
  --color-electric-eel-400: #7199cd;
  --color-electric-eel-500: #5880b3;
  --color-electric-eel-600: #426798;
  --color-electric-eel-700: #30527e;
  --color-electric-eel-800: #234168;
  --color-electric-eel-900: #193355;
  --color-electric-eel-950: #0d2037;
  --color-crashing-waves: #3e6c7f;
  --color-crashing-waves-50: #e9f8ff;
  --color-crashing-waves-100: #d1f0fd;
  --color-crashing-waves-200: #b7dcec;
  --color-crashing-waves-300: #9bc4d7;
  --color-crashing-waves-400: #77a4b8;
  --color-crashing-waves-500: #59889c;
  --color-crashing-waves-600: #3e6c7f;
  --color-crashing-waves-700: #2d5666;
  --color-crashing-waves-800: #204352;
  --color-crashing-waves-900: #163440;
  --color-crashing-waves-950: #0a2029;
  --color-cape-verde: #005954;
  --color-cape-verde-50: #d8fefa;
  --color-cape-verde-100: #caf6f1;
  --color-cape-verde-200: #ade2dc;
  --color-cape-verde-300: #8ecbc5;
  --color-cape-verde-400: #66aba5;
  --color-cape-verde-500: #468e88;
  --color-cape-verde-600: #2b716c;
  --color-cape-verde-700: #005954;
  --color-cape-verde-800: #084541;
  --color-cape-verde-900: #023632;
  --color-cape-verde-950: #00211f;
}