Start generating

Droplet to Sunken Ship color palette

B1DBFFDroplet3AB9D2Blue Bobbin008AA0Waikiki0065C9God of Rain00474ATropical Forest002527Sunken Ship
Open in generator Export PNG, PDF, ASE…

About this palette

Droplet to Sunken Ship is a 6-color cool, gradient palette: #B1DBFF (Droplet), #3AB9D2 (Blue Bobbin), #008AA0 (Waikiki), #0065C9 (God of Rain), #00474A (Tropical Forest), #002527 (Sunken Ship). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #B1DBFF on #002527 with a contrast ratio of 11.16:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Dropletrgb(177, 219, 255)hsl(208, 100%, 85%)
Blue Bobbinrgb(58, 185, 210)hsl(190, 63%, 53%)
Waikikirgb(0, 138, 160)hsl(188, 100%, 31%)
God of Rainrgb(0, 101, 201)hsl(210, 100%, 39%)
Tropical Forestrgb(0, 71, 74)hsl(182, 100%, 15%)
Sunken Shiprgb(0, 37, 39)hsl(183, 100%, 8%)

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.

  • Aa11.16:1 Very good#B1DBFF on #002527
  • Aa11.16:1 Very good#002527 on #B1DBFF
  • Aa7.22:1 Very good#B1DBFF on #00474A
  • Aa7.22:1 Very good#00474A on #B1DBFF
  • Aa6.99:1 Good#3AB9D2 on #002527
  • Aa6.99:1 Good#002527 on #3AB9D2
  • Aa4.52:1 Good#3AB9D2 on #00474A
  • Aa4.52:1 Good#00474A on #3AB9D2

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Droplet to Sunken Ship — https://swatchly.xyz/palette/b1dbff-3ab9d2-008aa0-0065c9-00474a-002527 */
:root {
  --droplet: #b1dbff;
  --blue-bobbin: #3ab9d2;
  --waikiki: #008aa0;
  --god-of-rain: #0065c9;
  --tropical-forest: #00474a;
  --sunken-ship: #002527;
}

Tailwind CSS v4

/* Droplet to Sunken Ship — https://swatchly.xyz/palette/b1dbff-3ab9d2-008aa0-0065c9-00474a-002527 */
@theme {
  --color-droplet: #b1dbff;
  --color-droplet-50: #eaf5ff;
  --color-droplet-100: #d7edff;
  --color-droplet-200: #b1dbff;
  --color-droplet-300: #a1c4e2;
  --color-droplet-400: #7ea5c6;
  --color-droplet-500: #638aab;
  --color-droplet-600: #4a6f8f;
  --color-droplet-700: #365975;
  --color-droplet-800: #27455e;
  --color-droplet-900: #1b354a;
  --color-droplet-950: #0e2130;
  --color-blue-bobbin: #3ab9d2;
  --color-blue-bobbin-50: #e9fbff;
  --color-blue-bobbin-100: #d0f6ff;
  --color-blue-bobbin-200: #9beafc;
  --color-blue-bobbin-300: #78d6eb;
  --color-blue-bobbin-400: #3ab9d2;
  --color-blue-bobbin-500: #009bb4;
  --color-blue-bobbin-600: #007d91;
  --color-blue-bobbin-700: #006373;
  --color-blue-bobbin-800: #004d5a;
  --color-blue-bobbin-900: #003b45;
  --color-blue-bobbin-950: #00242b;
  --color-waikiki: #008aa0;
  --color-waikiki-50: #def9ff;
  --color-waikiki-100: #bbf2ff;
  --color-waikiki-200: #93dff1;
  --color-waikiki-300: #6ec8dd;
  --color-waikiki-400: #3da8be;
  --color-waikiki-500: #008aa0;
  --color-waikiki-600: #006f81;
  --color-waikiki-700: #005967;
  --color-waikiki-800: #004652;
  --color-waikiki-900: #003640;
  --color-waikiki-950: #00232a;
  --color-god-of-rain: #0065c9;
  --color-god-of-rain-50: #eff6ff;
  --color-god-of-rain-100: #deecff;
  --color-god-of-rain-200: #bcd9ff;
  --color-god-of-rain-300: #94c2ff;
  --color-god-of-rain-400: #56a0ff;
  --color-god-of-rain-500: #2d82e8;
  --color-god-of-rain-600: #0065c9;
  --color-god-of-rain-700: #0050a1;
  --color-god-of-rain-800: #003e80;
  --color-god-of-rain-900: #002f65;
  --color-god-of-rain-950: #001d43;
  --color-tropical-forest: #00474a;
  --color-tropical-forest-50: #dcfdfe;
  --color-tropical-forest-100: #cff3f5;
  --color-tropical-forest-200: #b5e1e3;
  --color-tropical-forest-300: #98cbcd;
  --color-tropical-forest-400: #73abae;
  --color-tropical-forest-500: #548f92;
  --color-tropical-forest-600: #3a7376;
  --color-tropical-forest-700: #265a5d;
  --color-tropical-forest-800: #00474a;
  --color-tropical-forest-900: #0d3637;
  --color-tropical-forest-950: #052122;
  --color-sunken-ship: #002527;
  --color-sunken-ship-50: #e5fafb;
  --color-sunken-ship-100: #d9f1f2;
  --color-sunken-ship-200: #c1dedf;
  --color-sunken-ship-300: #a8c8ca;
  --color-sunken-ship-400: #85a9ab;
  --color-sunken-ship-500: #698e90;
  --color-sunken-ship-600: #507375;
  --color-sunken-ship-700: #3c5c5e;
  --color-sunken-ship-800: #2c484a;
  --color-sunken-ship-900: #1f3839;
  --color-sunken-ship-950: #002527;
}

Similar palettes