Droplet to Black Cherry color palette

A3D8FFDroplet AAB283Norway C37B91Prehistoric Pink 71700FMuddy Green 1C4D67Seafarer 2E171FBlack Cherry

Open in generator Export PNG, PDF, ASE…

About this palette

Droplet to Black Cherry is a 6-color vintage palette: #A3D8FF (Droplet), #AAB283 (Norway), #C37B91 (Prehistoric Pink), #71700F (Muddy Green), #1C4D67 (Seafarer), #2E171F (Black Cherry). It mixes blue, green, pink, brown, red tones and feels balanced overall. The strongest text pairing is #A3D8FF on #2E171F with a contrast ratio of 10.98:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Droplet	rgb(163, 216, 255)	hsl(205, 100%, 82%)
Norway	rgb(170, 178, 131)	hsl(70, 23%, 61%)
Prehistoric Pink	rgb(195, 123, 145)	hsl(342, 37%, 62%)
Muddy Green	rgb(113, 112, 15)	hsl(59, 77%, 25%)
Seafarer	rgb(28, 77, 103)	hsl(201, 57%, 26%)
Black Cherry	rgb(46, 23, 31)	hsl(339, 33%, 14%)

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.98:1 Very good#A3D8FF on #2E171F
Aa10.98:1 Very good#2E171F on #A3D8FF
Aa7.47:1 Very good#AAB283 on #2E171F
Aa7.47:1 Very good#2E171F on #AAB283
Aa5.99:1 Good#A3D8FF on #1C4D67
Aa5.99:1 Good#1C4D67 on #A3D8FF
Aa5.21:1 Good#C37B91 on #2E171F
Aa5.21:1 Good#2E171F on #C37B91

Color blindness preview

CSS variables

/* Droplet to Black Cherry — https://swatchly.xyz/palette/a3d8ff-aab283-c37b91-71700f-1c4d67-2e171f */
:root {
  --droplet: #a3d8ff;
  --norway: #aab283;
  --prehistoric-pink: #c37b91;
  --muddy-green: #71700f;
  --seafarer: #1c4d67;
  --black-cherry: #2e171f;
}

Tailwind CSS v4

/* Droplet to Black Cherry — https://swatchly.xyz/palette/a3d8ff-aab283-c37b91-71700f-1c4d67-2e171f */
@theme {
  --color-droplet: #a3d8ff;
  --color-droplet-50: #e3f3ff;
  --color-droplet-100: #ceeaff;
  --color-droplet-200: #a3d8ff;
  --color-droplet-300: #94c2e3;
  --color-droplet-400: #72a4c8;
  --color-droplet-500: #5789ad;
  --color-droplet-600: #3e6f91;
  --color-droplet-700: #2c5978;
  --color-droplet-800: #1e4662;
  --color-droplet-900: #13364d;
  --color-droplet-950: #082232;
  --color-norway: #aab283;
  --color-norway-50: #f7fce3;
  --color-norway-100: #eff5d8;
  --color-norway-200: #dde3c2;
  --color-norway-300: #c8cfa8;
  --color-norway-400: #aab283;
  --color-norway-500: #8d9467;
  --color-norway-600: #70774b;
  --color-norway-700: #585f36;
  --color-norway-800: #444925;
  --color-norway-900: #333719;
  --color-norway-950: #1e210c;
  --color-prehistoric-pink: #c37b91;
  --color-prehistoric-pink-50: #fff4f7;
  --color-prehistoric-pink-100: #ffeaef;
  --color-prehistoric-pink-200: #ffd0dd;
  --color-prehistoric-pink-300: #f5b6c8;
  --color-prehistoric-pink-400: #db96ab;
  --color-prehistoric-pink-500: #c37b91;
  --color-prehistoric-pink-600: #a35e74;
  --color-prehistoric-pink-700: #86475b;
  --color-prehistoric-pink-800: #6b3446;
  --color-prehistoric-pink-900: #542535;
  --color-prehistoric-pink-950: #361420;
  --color-muddy-green: #71700f;
  --color-muddy-green-50: #f8f9cb;
  --color-muddy-green-100: #eef0bb;
  --color-muddy-green-200: #dbdc9e;
  --color-muddy-green-300: #c5c67e;
  --color-muddy-green-400: #a6a755;
  --color-muddy-green-500: #8b8b33;
  --color-muddy-green-600: #71700f;
  --color-muddy-green-700: #5a5900;
  --color-muddy-green-800: #464500;
  --color-muddy-green-900: #363500;
  --color-muddy-green-950: #212100;
  --color-seafarer: #1c4d67;
  --color-seafarer-50: #ebf7ff;
  --color-seafarer-100: #d7efff;
  --color-seafarer-200: #b8def5;
  --color-seafarer-300: #9ec9e3;
  --color-seafarer-400: #7cabc7;
  --color-seafarer-500: #6090ad;
  --color-seafarer-600: #477691;
  --color-seafarer-700: #335f79;
  --color-seafarer-800: #1c4d67;
  --color-seafarer-900: #183b4e;
  --color-seafarer-950: #0c2533;
  --color-black-cherry: #2e171f;
  --color-black-cherry-50: #fff1f5;
  --color-black-cherry-100: #fae5eb;
  --color-black-cherry-200: #e9d0d7;
  --color-black-cherry-300: #d4b8c1;
  --color-black-cherry-400: #b698a1;
  --color-black-cherry-500: #9b7d86;
  --color-black-cherry-600: #7f636b;
  --color-black-cherry-700: #664d55;
  --color-black-cherry-800: #513b42;
  --color-black-cherry-900: #3f2d33;
  --color-black-cherry-950: #2e171f;
}