Droplet to A State of Mint Color Palette

About this palette

Droplet to A State of Mint is a 5-color vibrant, light, cool, neon palette: #A8DCFF (Droplet), #00E0A4 (Envy’s Love), #FF479A (Fuchsia Fever), #FF7463 (Peachy Pinky), #8CFFDC (A State of Mint). It mixes blue, turquoise, pink, red tones and feels cool overall. The strongest text pairing is #FF479A on #8CFFDC with a contrast ratio of 2.64:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Droplet	rgb(168, 220, 255)	hsl(204, 100%, 83%)
Envy’s Love	rgb(0, 224, 164)	hsl(164, 100%, 44%)
Fuchsia Fever	rgb(255, 71, 154)	hsl(333, 100%, 64%)
Peachy Pinky	rgb(255, 116, 99)	hsl(7, 100%, 69%)
A State of Mint	rgb(140, 255, 220)	hsl(162, 100%, 77%)

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.

Color blindness preview

CSS variables

/* Droplet to A State of Mint — https://swatchly.xyz/palette/a8dcff-00e0a4-ff479a-ff7463-8cffdc */
:root {
  --droplet: #a8dcff;
  --envy-s-love: #00e0a4;
  --fuchsia-fever: #ff479a;
  --peachy-pinky: #ff7463;
  --a-state-of-mint: #8cffdc;
}

Tailwind CSS v4

/* Droplet to A State of Mint — https://swatchly.xyz/palette/a8dcff-00e0a4-ff479a-ff7463-8cffdc */
@theme {
  --color-droplet: #a8dcff;
  --color-droplet-50: #e7f5ff;
  --color-droplet-100: #d3edff;
  --color-droplet-200: #a8dcff;
  --color-droplet-300: #99c5e3;
  --color-droplet-400: #76a6c6;
  --color-droplet-500: #5a8bab;
  --color-droplet-600: #41718f;
  --color-droplet-700: #2e5a76;
  --color-droplet-800: #1f475f;
  --color-droplet-900: #14364b;
  --color-droplet-950: #092231;
  --color-envy-s-love: #00e0a4;
  --color-envy-s-love-50: #d7ffec;
  --color-envy-s-love-100: #aaffda;
  --color-envy-s-love-200: #7cf0c1;
  --color-envy-s-love-300: #00e0a4;
  --color-envy-s-love-400: #00bc89;
  --color-envy-s-love-500: #009d72;
  --color-envy-s-love-600: #007e5b;
  --color-envy-s-love-700: #006548;
  --color-envy-s-love-800: #004f38;
  --color-envy-s-love-900: #003d2a;
  --color-envy-s-love-950: #002719;
  --color-fuchsia-fever: #ff479a;
  --color-fuchsia-fever-50: #ffedf2;
  --color-fuchsia-fever-100: #ffdce7;
  --color-fuchsia-fever-200: #ffbcd2;
  --color-fuchsia-fever-300: #ff94ba;
  --color-fuchsia-fever-400: #ff479a;
  --color-fuchsia-fever-500: #e02180;
  --color-fuchsia-fever-600: #ba0067;
  --color-fuchsia-fever-700: #960052;
  --color-fuchsia-fever-800: #780040;
  --color-fuchsia-fever-900: #5f0032;
  --color-fuchsia-fever-950: #40001f;
  --color-peachy-pinky: #ff7463;
  --color-peachy-pinky-50: #fff3f2;
  --color-peachy-pinky-100: #ffe7e3;
  --color-peachy-pinky-200: #ffccc4;
  --color-peachy-pinky-300: #ffab9e;
  --color-peachy-pinky-400: #ff7463;
  --color-peachy-pinky-500: #de5648;
  --color-peachy-pinky-600: #bd392d;
  --color-peachy-pinky-700: #9d2119;
  --color-peachy-pinky-800: #800f0a;
  --color-peachy-pinky-900: #660302;
  --color-peachy-pinky-950: #430000;
  --color-a-state-of-mint: #8cffdc;
  --color-a-state-of-mint-50: #c5ffeb;
  --color-a-state-of-mint-100: #8cffdc;
  --color-a-state-of-mint-200: #93e6cc;
  --color-a-state-of-mint-300: #72d3b5;
  --color-a-state-of-mint-400: #43b596;
  --color-a-state-of-mint-500: #0e9b7c;
  --color-a-state-of-mint-600: #007e64;
  --color-a-state-of-mint-700: #00654f;
  --color-a-state-of-mint-800: #004f3e;
  --color-a-state-of-mint-900: #003d2f;
  --color-a-state-of-mint-950: #00261d;
}