Droplet to Blue Burst Color Palette

About this palette

Droplet to Blue Burst is a 4-color cool, monochromatic palette: #9DDFFF (Droplet), #006D95 (Hydra), #003147 (Nordic Noir), #009FD5 (Blue Burst). It mixes blue tones and feels cool overall. The strongest text pairing is #9DDFFF on #003147 with a contrast ratio of 9.43:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Droplet	rgb(157, 223, 255)	hsl(200, 100%, 81%)
Hydra	rgb(0, 109, 149)	hsl(196, 100%, 29%)
Nordic Noir	rgb(0, 49, 71)	hsl(199, 100%, 14%)
Blue Burst	rgb(0, 159, 213)	hsl(195, 100%, 42%)

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.

Aa9.43:1 Very good#9DDFFF on #003147
Aa9.43:1 Very good#003147 on #9DDFFF
Aa4.52:1 Good#003147 on #009FD5
Aa4.52:1 Good#009FD5 on #003147
Aa3.99:1 Poor#9DDFFF on #006D95
Aa3.99:1 Poor#006D95 on #9DDFFF

Color blindness preview

CSS variables

/* Droplet to Blue Burst — https://swatchly.xyz/palette/9ddfff-006d95-003147-009fd5 */
:root {
  --droplet: #9ddfff;
  --hydra: #006d95;
  --nordic-noir: #003147;
  --blue-burst: #009fd5;
}

Tailwind CSS v4

/* Droplet to Blue Burst — https://swatchly.xyz/palette/9ddfff-006d95-003147-009fd5 */
@theme {
  --color-droplet: #9ddfff;
  --color-droplet-50: #e5f6ff;
  --color-droplet-100: #ceeeff;
  --color-droplet-200: #9ddfff;
  --color-droplet-300: #90c7e3;
  --color-droplet-400: #6ba9c6;
  --color-droplet-500: #4d8eab;
  --color-droplet-600: #33738f;
  --color-droplet-700: #205c76;
  --color-droplet-800: #11495f;
  --color-droplet-900: #07384b;
  --color-droplet-950: #022331;
  --color-hydra: #006d95;
  --color-hydra-50: #eaf7ff;
  --color-hydra-100: #d2efff;
  --color-hydra-200: #a2deff;
  --color-hydra-300: #7fc7ed;
  --color-hydra-400: #54a7d0;
  --color-hydra-500: #3189b3;
  --color-hydra-600: #006d95;
  --color-hydra-700: #005677;
  --color-hydra-800: #00445e;
  --color-hydra-900: #00344a;
  --color-hydra-950: #002130;
  --color-nordic-noir: #003147;
  --color-nordic-noir-50: #ebf7ff;
  --color-nordic-noir-100: #d6f0ff;
  --color-nordic-noir-200: #bbddf2;
  --color-nordic-noir-300: #a0c7df;
  --color-nordic-noir-400: #7ba7c1;
  --color-nordic-noir-500: #5e8aa4;
  --color-nordic-noir-600: #446e86;
  --color-nordic-noir-700: #2f566b;
  --color-nordic-noir-800: #204154;
  --color-nordic-noir-900: #003147;
  --color-nordic-noir-950: #0a1d27;
  --color-blue-burst: #009fd5;
  --color-blue-burst-50: #eff9ff;
  --color-blue-burst-100: #def3ff;
  --color-blue-burst-200: #b7e6ff;
  --color-blue-burst-300: #83d5ff;
  --color-blue-burst-400: #48b9ec;
  --color-blue-burst-500: #009fd5;
  --color-blue-burst-600: #0080ac;
  --color-blue-burst-700: #006589;
  --color-blue-burst-800: #004f6b;
  --color-blue-burst-900: #003c53;
  --color-blue-burst-950: #002534;
}