Caribbean Blue to Droplet color palette

47BEE6Caribbean Blue 1682ACNeptune 064F67Raging Thunderstorm 002E3FNordic Noir A6E0FFDroplet

About this palette

Caribbean Blue to Droplet is a 5-color cool, monochromatic palette: #47BEE6 (Caribbean Blue), #1682AC (Neptune), #064F67 (Raging Thunderstorm), #002E3F (Nordic Noir), #A6E0FF (Droplet). It mixes blue tones and feels cool overall. The strongest text pairing is #002E3F on #A6E0FF with a contrast ratio of 10.07:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Caribbean Blue	rgb(71, 190, 230)	hsl(195, 76%, 59%)
Neptune	rgb(22, 130, 172)	hsl(197, 77%, 38%)
Raging Thunderstorm	rgb(6, 79, 103)	hsl(195, 89%, 21%)
Nordic Noir	rgb(0, 46, 63)	hsl(196, 100%, 12%)
Droplet	rgb(166, 224, 255)	hsl(201, 100%, 83%)

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.

Aa10.07:1 Very good#002E3F on #A6E0FF
Aa10.07:1 Very good#A6E0FF on #002E3F
Aa6.68:1 Good#47BEE6 on #002E3F
Aa6.68:1 Good#002E3F on #47BEE6
Aa6.34:1 Good#064F67 on #A6E0FF
Aa6.34:1 Good#A6E0FF on #064F67
Aa4.21:1 Poor#47BEE6 on #064F67
Aa4.21:1 Poor#064F67 on #47BEE6

Color blindness preview

CSS variables

/* Caribbean Blue to Droplet — https://swatchly.xyz/palette/47bee6-1682ac-064f67-002e3f-a6e0ff */
:root {
  --caribbean-blue: #47bee6;
  --neptune: #1682ac;
  --raging-thunderstorm: #064f67;
  --nordic-noir: #002e3f;
  --droplet: #a6e0ff;
}

Tailwind CSS v4

/* Caribbean Blue to Droplet — https://swatchly.xyz/palette/47bee6-1682ac-064f67-002e3f-a6e0ff */
@theme {
  --color-caribbean-blue: #47bee6;
  --color-caribbean-blue-50: #f3fbff;
  --color-caribbean-blue-100: #e1f6ff;
  --color-caribbean-blue-200: #b5eaff;
  --color-caribbean-blue-300: #83dafa;
  --color-caribbean-blue-400: #47bee6;
  --color-caribbean-blue-500: #1d9fc6;
  --color-caribbean-blue-600: #0080a1;
  --color-caribbean-blue-700: #006580;
  --color-caribbean-blue-800: #004e63;
  --color-caribbean-blue-900: #003b4c;
  --color-caribbean-blue-950: #00242f;
  --color-neptune: #1682ac;
  --color-neptune-50: #eaf8ff;
  --color-neptune-100: #d9f2ff;
  --color-neptune-200: #b1e4ff;
  --color-neptune-300: #88d2f8;
  --color-neptune-400: #5fb5df;
  --color-neptune-500: #3c9cc6;
  --color-neptune-600: #1682ac;
  --color-neptune-700: #00678c;
  --color-neptune-800: #00516e;
  --color-neptune-900: #003e55;
  --color-neptune-950: #002637;
  --color-raging-thunderstorm: #064f67;
  --color-raging-thunderstorm-50: #e9f8ff;
  --color-raging-thunderstorm-100: #d2f1ff;
  --color-raging-thunderstorm-200: #b2e0f5;
  --color-raging-thunderstorm-300: #96cbe2;
  --color-raging-thunderstorm-400: #72adc7;
  --color-raging-thunderstorm-500: #5592ad;
  --color-raging-thunderstorm-600: #3b7891;
  --color-raging-thunderstorm-700: #276179;
  --color-raging-thunderstorm-800: #064f67;
  --color-raging-thunderstorm-900: #0d3d4e;
  --color-raging-thunderstorm-950: #042633;
  --color-nordic-noir: #002e3f;
  --color-nordic-noir-50: #e9f8ff;
  --color-nordic-noir-100: #d5f0fe;
  --color-nordic-noir-200: #bdddee;
  --color-nordic-noir-300: #a2c7da;
  --color-nordic-noir-400: #7da7ba;
  --color-nordic-noir-500: #5f899d;
  --color-nordic-noir-600: #446d7f;
  --color-nordic-noir-700: #2f5464;
  --color-nordic-noir-800: #203e4c;
  --color-nordic-noir-900: #002e3f;
  --color-nordic-noir-950: #091a22;
  --color-droplet: #a6e0ff;
  --color-droplet-50: #e9f7ff;
  --color-droplet-100: #d3efff;
  --color-droplet-200: #a6e0ff;
  --color-droplet-300: #98c8e2;
  --color-droplet-400: #73a9c6;
  --color-droplet-500: #568eaa;
  --color-droplet-600: #3c738e;
  --color-droplet-700: #295c74;
  --color-droplet-800: #1a485d;
  --color-droplet-900: #10374a;
  --color-droplet-950: #062230;
}