Droplet to Secret Passage color palette

A6DDFFDroplet BC88FFIllicit Purple 008FD0Way Beyond the Blue 6C5500Ayahuasca Vine 312A00Secret Passage

Open in generator Export PNG, PDF, ASE…

About this palette

Droplet to Secret Passage is a 5-color cool palette: #A6DDFF (Droplet), #BC88FF (Illicit Purple), #008FD0 (Way Beyond the Blue), #6C5500 (Ayahuasca Vine), #312A00 (Secret Passage). It mixes blue, purple, brown tones and feels cool overall. The strongest text pairing is #A6DDFF on #312A00 with a contrast ratio of 9.86:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Droplet	rgb(166, 221, 255)	hsl(203, 100%, 83%)
Illicit Purple	rgb(188, 136, 255)	hsl(266, 100%, 77%)
Way Beyond the Blue	rgb(0, 143, 208)	hsl(199, 100%, 41%)
Ayahuasca Vine	rgb(108, 85, 0)	hsl(47, 100%, 21%)
Secret Passage	rgb(49, 42, 0)	hsl(51, 100%, 10%)

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.86:1 Very good#A6DDFF on #312A00
Aa9.86:1 Very good#312A00 on #A6DDFF
Aa5.54:1 Good#BC88FF on #312A00
Aa5.54:1 Good#312A00 on #BC88FF
Aa4.91:1 Good#A6DDFF on #6C5500
Aa4.91:1 Good#6C5500 on #A6DDFF
Aa3.99:1 Poor#008FD0 on #312A00
Aa3.99:1 Poor#312A00 on #008FD0

Color blindness preview

CSS variables

/* Droplet to Secret Passage — https://swatchly.xyz/palette/a6ddff-bc88ff-008fd0-6c5500-312a00 */
:root {
  --droplet: #a6ddff;
  --illicit-purple: #bc88ff;
  --way-beyond-the-blue: #008fd0;
  --ayahuasca-vine: #6c5500;
  --secret-passage: #312a00;
}

Tailwind CSS v4

/* Droplet to Secret Passage — https://swatchly.xyz/palette/a6ddff-bc88ff-008fd0-6c5500-312a00 */
@theme {
  --color-droplet: #a6ddff;
  --color-droplet-50: #e7f6ff;
  --color-droplet-100: #d2edff;
  --color-droplet-200: #a6ddff;
  --color-droplet-300: #97c6e2;
  --color-droplet-400: #74a7c6;
  --color-droplet-500: #578cab;
  --color-droplet-600: #3e718f;
  --color-droplet-700: #2b5b76;
  --color-droplet-800: #1d475f;
  --color-droplet-900: #12374b;
  --color-droplet-950: #082230;
  --color-illicit-purple: #bc88ff;
  --color-illicit-purple-50: #f8f5ff;
  --color-illicit-purple-100: #f1e9ff;
  --color-illicit-purple-200: #e3d1ff;
  --color-illicit-purple-300: #d2b5ff;
  --color-illicit-purple-400: #bc88ff;
  --color-illicit-purple-500: #9f6bdf;
  --color-illicit-purple-600: #834fbf;
  --color-illicit-purple-700: #6a39a0;
  --color-illicit-purple-800: #542783;
  --color-illicit-purple-900: #411a68;
  --color-illicit-purple-950: #290d45;
  --color-way-beyond-the-blue: #008fd0;
  --color-way-beyond-the-blue-50: #ecf7ff;
  --color-way-beyond-the-blue-100: #d8efff;
  --color-way-beyond-the-blue-200: #afdeff;
  --color-way-beyond-the-blue-300: #7bcaff;
  --color-way-beyond-the-blue-400: #40abeb;
  --color-way-beyond-the-blue-500: #008fd0;
  --color-way-beyond-the-blue-600: #0073a9;
  --color-way-beyond-the-blue-700: #005b87;
  --color-way-beyond-the-blue-800: #00476b;
  --color-way-beyond-the-blue-900: #003753;
  --color-way-beyond-the-blue-950: #002236;
  --color-ayahuasca-vine: #6c5500;
  --color-ayahuasca-vine-50: #fff5d8;
  --color-ayahuasca-vine-100: #faeac0;
  --color-ayahuasca-vine-200: #e9d7a4;
  --color-ayahuasca-vine-300: #d6c086;
  --color-ayahuasca-vine-400: #b8a15f;
  --color-ayahuasca-vine-500: #9e8640;
  --color-ayahuasca-vine-600: #836c25;
  --color-ayahuasca-vine-700: #6c5500;
  --color-ayahuasca-vine-800: #554200;
  --color-ayahuasca-vine-900: #423300;
  --color-ayahuasca-vine-950: #2a1f00;
  --color-secret-passage: #312a00;
  --color-secret-passage-50: #faf6de;
  --color-secret-passage-100: #f1ecd1;
  --color-secret-passage-200: #ded9b8;
  --color-secret-passage-300: #c8c29d;
  --color-secret-passage-400: #a8a178;
  --color-secret-passage-500: #8b845a;
  --color-secret-passage-600: #6e6840;
  --color-secret-passage-700: #564f2c;
  --color-secret-passage-800: #403b1d;
  --color-secret-passage-900: #312a00;
  --color-secret-passage-950: #1b1908;
}