Cape Verde to Broad Daylight Color Palette

About this palette

Cape Verde to Broad Daylight is a 5-color cool, gradient palette: #005646 (Cape Verde), #00819C (Ahoy! Blue), #00B5A8 (Waterfall), #4FC3E5 (Skydive), #B3DDFF (Broad Daylight). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #005646 on #B3DDFF with a contrast ratio of 6.08:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cape Verde	rgb(0, 86, 70)	hsl(169, 100%, 17%)
Ahoy! Blue	rgb(0, 129, 156)	hsl(190, 100%, 31%)
Waterfall	rgb(0, 181, 168)	hsl(176, 100%, 35%)
Skydive	rgb(79, 195, 229)	hsl(194, 74%, 60%)
Broad Daylight	rgb(179, 221, 255)	hsl(207, 100%, 85%)

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.08:1 Good#005646 on #B3DDFF
Aa6.08:1 Good#B3DDFF on #005646
Aa4.24:1 Poor#005646 on #4FC3E5
Aa4.24:1 Poor#4FC3E5 on #005646
Aa3.38:1 Poor#005646 on #00B5A8
Aa3.38:1 Poor#00B5A8 on #005646
Aa3.18:1 Poor#00819C on #B3DDFF
Aa3.18:1 Poor#B3DDFF on #00819C

Color blindness preview

CSS variables

/* Cape Verde to Broad Daylight — https://swatchly.xyz/palette/005646-00819c-00b5a8-4fc3e5-b3ddff */
:root {
  --cape-verde: #005646;
  --ahoy-blue: #00819c;
  --waterfall: #00b5a8;
  --skydive: #4fc3e5;
  --broad-daylight: #b3ddff;
}

Tailwind CSS v4

/* Cape Verde to Broad Daylight — https://swatchly.xyz/palette/005646-00819c-00b5a8-4fc3e5-b3ddff */
@theme {
  --color-cape-verde: #005646;
  --color-cape-verde-50: #d9fff3;
  --color-cape-verde-100: #ccf6e9;
  --color-cape-verde-200: #b1e4d5;
  --color-cape-verde-300: #96d0bf;
  --color-cape-verde-400: #71b3a1;
  --color-cape-verde-500: #549987;
  --color-cape-verde-600: #3a7f6d;
  --color-cape-verde-700: #256858;
  --color-cape-verde-800: #005646;
  --color-cape-verde-900: #094236;
  --color-cape-verde-950: #022a22;
  --color-ahoy-blue: #00819c;
  --color-ahoy-blue-50: #e6f9ff;
  --color-ahoy-blue-100: #d1f4ff;
  --color-ahoy-blue-200: #a3e7fc;
  --color-ahoy-blue-300: #84d3eb;
  --color-ahoy-blue-400: #59b5d0;
  --color-ahoy-blue-500: #349bb7;
  --color-ahoy-blue-600: #00819c;
  --color-ahoy-blue-700: #00667c;
  --color-ahoy-blue-800: #005062;
  --color-ahoy-blue-900: #003d4c;
  --color-ahoy-blue-950: #002630;
  --color-waterfall: #00b5a8;
  --color-waterfall-50: #cffff8;
  --color-waterfall-100: #adfaf0;
  --color-waterfall-200: #89e9dd;
  --color-waterfall-300: #60d3c7;
  --color-waterfall-400: #00b5a8;
  --color-waterfall-500: #00978c;
  --color-waterfall-600: #007a71;
  --color-waterfall-700: #006159;
  --color-waterfall-800: #004c46;
  --color-waterfall-900: #003b36;
  --color-waterfall-950: #002622;
  --color-skydive: #4fc3e5;
  --color-skydive-50: #d4f4ff;
  --color-skydive-100: #b3ecff;
  --color-skydive-200: #84daf5;
  --color-skydive-300: #4fc3e5;
  --color-skydive-400: #2da5c6;
  --color-skydive-500: #008baa;
  --color-skydive-600: #00718a;
  --color-skydive-700: #005b70;
  --color-skydive-800: #00485a;
  --color-skydive-900: #003948;
  --color-skydive-950: #00242e;
  --color-broad-daylight: #b3ddff;
  --color-broad-daylight-50: #ecf6ff;
  --color-broad-daylight-100: #d9eeff;
  --color-broad-daylight-200: #b3ddff;
  --color-broad-daylight-300: #a3c6e2;
  --color-broad-daylight-400: #80a6c5;
  --color-broad-daylight-500: #648baa;
  --color-broad-daylight-600: #4a708e;
  --color-broad-daylight-700: #365974;
  --color-broad-daylight-800: #27465d;
  --color-broad-daylight-900: #1c3649;
  --color-broad-daylight-950: #0e212f;
}