Droplet to Midnight Velvet Color Palette

About this palette

Droplet to Midnight Velvet is a 4-color cool, gradient palette: #97DAFF (Droplet), #37A3FE (Sky Dancer), #006E87 (Waterworld), #271D41 (Midnight Velvet). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #97DAFF on #271D41 with a contrast ratio of 10.30:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Droplet	rgb(151, 218, 255)	hsl(201, 100%, 80%)
Sky Dancer	rgb(55, 163, 254)	hsl(207, 99%, 61%)
Waterworld	rgb(0, 110, 135)	hsl(191, 100%, 26%)
Midnight Velvet	rgb(39, 29, 65)	hsl(257, 38%, 18%)

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.30:1 Very good#97DAFF on #271D41
Aa10.30:1 Very good#271D41 on #97DAFF
Aa5.85:1 Good#37A3FE on #271D41
Aa5.85:1 Good#271D41 on #37A3FE
Aa3.85:1 Poor#97DAFF on #006E87
Aa3.85:1 Poor#006E87 on #97DAFF

Color blindness preview

CSS variables

/* Droplet to Midnight Velvet — https://swatchly.xyz/palette/97daff-37a3fe-006e87-271d41 */
:root {
  --droplet: #97daff;
  --sky-dancer: #37a3fe;
  --waterworld: #006e87;
  --midnight-velvet: #271d41;
}

Tailwind CSS v4

/* Droplet to Midnight Velvet — https://swatchly.xyz/palette/97daff-37a3fe-006e87-271d41 */
@theme {
  --color-droplet: #97daff;
  --color-droplet-50: #e0f3ff;
  --color-droplet-100: #c8ebff;
  --color-droplet-200: #97daff;
  --color-droplet-300: #8ac3e3;
  --color-droplet-400: #66a6c8;
  --color-droplet-500: #4a8bae;
  --color-droplet-600: #307192;
  --color-droplet-700: #1d5b79;
  --color-droplet-800: #0f4862;
  --color-droplet-900: #05384e;
  --color-droplet-950: #012332;
  --color-sky-dancer: #37a3fe;
  --color-sky-dancer-50: #ebf5ff;
  --color-sky-dancer-100: #d9ecff;
  --color-sky-dancer-200: #b4d9ff;
  --color-sky-dancer-300: #86c4ff;
  --color-sky-dancer-400: #37a3fe;
  --color-sky-dancer-500: #0687e0;
  --color-sky-dancer-600: #006db7;
  --color-sky-dancer-700: #005693;
  --color-sky-dancer-800: #004374;
  --color-sky-dancer-900: #00345c;
  --color-sky-dancer-950: #00203d;
  --color-waterworld: #006e87;
  --color-waterworld-50: #e7f9ff;
  --color-waterworld-100: #c9f1ff;
  --color-waterworld-200: #a1dff4;
  --color-waterworld-300: #80c8e0;
  --color-waterworld-400: #55a8c2;
  --color-waterworld-500: #318ba4;
  --color-waterworld-600: #006e87;
  --color-waterworld-700: #00576c;
  --color-waterworld-800: #004455;
  --color-waterworld-900: #003542;
  --color-waterworld-950: #00212b;
  --color-midnight-velvet: #271d41;
  --color-midnight-velvet-50: #f5f3ff;
  --color-midnight-velvet-100: #ece8ff;
  --color-midnight-velvet-200: #d9d2f5;
  --color-midnight-velvet-300: #c2bae2;
  --color-midnight-velvet-400: #a39ac6;
  --color-midnight-velvet-500: #8980ac;
  --color-midnight-velvet-600: #706790;
  --color-midnight-velvet-700: #5a5278;
  --color-midnight-velvet-800: #484062;
  --color-midnight-velvet-900: #393250;
  --color-midnight-velvet-950: #271d41;
}