Start generating

Dark Serpent to Droplet color palette

172F16Dark Serpent523C54Black Magic6DBDE4MalibuBE7520Pirate Gold774875Purple PassionA6DDFFDroplet
Open in generator Export PNG, PDF, ASE…

About this palette

Dark Serpent to Droplet is a 6-color cool palette: #172F16 (Dark Serpent), #523C54 (Black Magic), #6DBDE4 (Malibu), #BE7520 (Pirate Gold), #774875 (Purple Passion), #A6DDFF (Droplet). It mixes green, purple, blue, orange, pink tones and feels cool overall. The strongest text pairing is #172F16 on #A6DDFF with a contrast ratio of 9.90:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Dark Serpentrgb(23, 47, 22)hsl(118, 36%, 14%)
Black Magicrgb(82, 60, 84)hsl(295, 17%, 28%)
Maliburgb(109, 189, 228)hsl(200, 69%, 66%)
Pirate Goldrgb(190, 117, 32)hsl(32, 71%, 44%)
Purple Passionrgb(119, 72, 117)hsl(303, 25%, 37%)
Dropletrgb(166, 221, 255)hsl(203, 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.

  • Aa9.90:1 Very good#172F16 on #A6DDFF
  • Aa9.90:1 Very good#A6DDFF on #172F16
  • Aa6.91:1 Good#172F16 on #6DBDE4
  • Aa6.91:1 Good#6DBDE4 on #172F16
  • Aa6.75:1 Good#523C54 on #A6DDFF
  • Aa6.75:1 Good#A6DDFF on #523C54
  • Aa4.85:1 Good#774875 on #A6DDFF
  • Aa4.85:1 Good#A6DDFF on #774875

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Dark Serpent to Droplet — https://swatchly.xyz/palette/172f16-523c54-6dbde4-be7520-774875-a6ddff */
:root {
  --dark-serpent: #172f16;
  --black-magic: #523c54;
  --malibu: #6dbde4;
  --pirate-gold: #be7520;
  --purple-passion: #774875;
  --droplet: #a6ddff;
}

Tailwind CSS v4

/* Dark Serpent to Droplet — https://swatchly.xyz/palette/172f16-523c54-6dbde4-be7520-774875-a6ddff */
@theme {
  --color-dark-serpent: #172f16;
  --color-dark-serpent-50: #eafbe9;
  --color-dark-serpent-100: #dff1dd;
  --color-dark-serpent-200: #c9dfc7;
  --color-dark-serpent-300: #b0c9ae;
  --color-dark-serpent-400: #8faa8d;
  --color-dark-serpent-500: #759173;
  --color-dark-serpent-600: #5d785b;
  --color-dark-serpent-700: #4a6248;
  --color-dark-serpent-800: #3a5038;
  --color-dark-serpent-900: #2d412c;
  --color-dark-serpent-950: #172f16;
  --color-black-magic: #523c54;
  --color-black-magic-50: #fef0ff;
  --color-black-magic-100: #f6e5f7;
  --color-black-magic-200: #e4d0e5;
  --color-black-magic-300: #cfb9d1;
  --color-black-magic-400: #b299b4;
  --color-black-magic-500: #977e99;
  --color-black-magic-600: #7c647e;
  --color-black-magic-700: #644f66;
  --color-black-magic-800: #523c54;
  --color-black-magic-900: #3e2e40;
  --color-black-magic-950: #281c29;
  --color-malibu: #6dbde4;
  --color-malibu-50: #d9f2ff;
  --color-malibu-100: #bde8ff;
  --color-malibu-200: #95d4f5;
  --color-malibu-300: #6dbde4;
  --color-malibu-400: #51a0c5;
  --color-malibu-500: #3487ab;
  --color-malibu-600: #196e91;
  --color-malibu-700: #005978;
  --color-malibu-800: #004761;
  --color-malibu-900: #00384e;
  --color-malibu-950: #002332;
  --color-pirate-gold: #be7520;
  --color-pirate-gold-50: #fff3e9;
  --color-pirate-gold-100: #ffe7d2;
  --color-pirate-gold-200: #ffcea1;
  --color-pirate-gold-300: #f5b374;
  --color-pirate-gold-400: #d99148;
  --color-pirate-gold-500: #be7520;
  --color-pirate-gold-600: #9d5c00;
  --color-pirate-gold-700: #7d4800;
  --color-pirate-gold-800: #633700;
  --color-pirate-gold-900: #4d2a00;
  --color-pirate-gold-950: #311900;
  --color-purple-passion: #774875;
  --color-purple-passion-50: #fff0fe;
  --color-purple-passion-100: #ffe0fd;
  --color-purple-passion-200: #f2caef;
  --color-purple-passion-300: #dfb2dc;
  --color-purple-passion-400: #c392c0;
  --color-purple-passion-500: #a977a6;
  --color-purple-passion-600: #8e5e8c;
  --color-purple-passion-700: #774875;
  --color-purple-passion-800: #5e375c;
  --color-purple-passion-900: #4a2949;
  --color-purple-passion-950: #30182f;
  --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;
}

Similar palettes