Droplet to Medium Roast Color Palette

About this palette

Droplet to Medium Roast is a 5-color cool, vintage palette: #9CDDFF (Droplet), #62ABCA (Frozen Wave), #3387AB (Underwater Moonlight), #7B4332 (Peanut), #411C00 (Medium Roast). It mixes blue, red, brown tones and feels cool overall. The strongest text pairing is #9CDDFF on #411C00 with a contrast ratio of 10.21:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Droplet	rgb(156, 221, 255)	hsl(201, 100%, 81%)
Frozen Wave	rgb(98, 171, 202)	hsl(198, 50%, 59%)
Underwater Moonlight	rgb(51, 135, 171)	hsl(198, 54%, 44%)
Peanut	rgb(123, 67, 50)	hsl(14, 42%, 34%)
Medium Roast	rgb(65, 28, 0)	hsl(26, 100%, 13%)

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.21:1 Very good#9CDDFF on #411C00
Aa10.21:1 Very good#411C00 on #9CDDFF
Aa5.89:1 Good#62ABCA on #411C00
Aa5.89:1 Good#411C00 on #62ABCA
Aa5.28:1 Good#9CDDFF on #7B4332
Aa5.28:1 Good#7B4332 on #9CDDFF
Aa3.73:1 Poor#3387AB on #411C00
Aa3.73:1 Poor#411C00 on #3387AB

Color blindness preview

CSS variables

/* Droplet to Medium Roast — https://swatchly.xyz/palette/9cddff-62abca-3387ab-7b4332-411c00 */
:root {
  --droplet: #9cddff;
  --frozen-wave: #62abca;
  --underwater-moonlight: #3387ab;
  --peanut: #7b4332;
  --medium-roast: #411c00;
}

Tailwind CSS v4

/* Droplet to Medium Roast — https://swatchly.xyz/palette/9cddff-62abca-3387ab-7b4332-411c00 */
@theme {
  --color-droplet: #9cddff;
  --color-droplet-50: #e3f5ff;
  --color-droplet-100: #ccedff;
  --color-droplet-200: #9cddff;
  --color-droplet-300: #8fc6e3;
  --color-droplet-400: #6aa8c7;
  --color-droplet-500: #4d8dac;
  --color-droplet-600: #347290;
  --color-droplet-700: #205c77;
  --color-droplet-800: #124860;
  --color-droplet-900: #08384c;
  --color-droplet-950: #022331;
  --color-frozen-wave: #62abca;
  --color-frozen-wave-50: #e8f8ff;
  --color-frozen-wave-100: #d1f0ff;
  --color-frozen-wave-200: #aae0f8;
  --color-frozen-wave-300: #8ccae5;
  --color-frozen-wave-400: #62abca;
  --color-frozen-wave-500: #468fad;
  --color-frozen-wave-600: #2a7491;
  --color-frozen-wave-700: #145d77;
  --color-frozen-wave-800: #034960;
  --color-frozen-wave-900: #00384b;
  --color-frozen-wave-950: #002330;
  --color-underwater-moonlight: #3387ab;
  --color-underwater-moonlight-50: #e6f6ff;
  --color-underwater-moonlight-100: #cceeff;
  --color-underwater-moonlight-200: #a0dcfa;
  --color-underwater-moonlight-300: #7fc5e7;
  --color-underwater-moonlight-400: #55a4c9;
  --color-underwater-moonlight-500: #3387ab;
  --color-underwater-moonlight-600: #166d8f;
  --color-underwater-moonlight-700: #005775;
  --color-underwater-moonlight-800: #00455d;
  --color-underwater-moonlight-900: #003549;
  --color-underwater-moonlight-950: #002230;
  --color-peanut: #7b4332;
  --color-peanut-50: #fff2ee;
  --color-peanut-100: #ffe5dd;
  --color-peanut-200: #fccabb;
  --color-peanut-300: #eab1a0;
  --color-peanut-400: #cd907e;
  --color-peanut-500: #b17462;
  --color-peanut-600: #935a49;
  --color-peanut-700: #7b4332;
  --color-peanut-800: #613426;
  --color-peanut-900: #4c261b;
  --color-peanut-950: #31160e;
  --color-medium-roast: #411c00;
  --color-medium-roast-50: #fff2eb;
  --color-medium-roast-100: #ffe5d6;
  --color-medium-roast-200: #f4cfb8;
  --color-medium-roast-300: #e0b79e;
  --color-medium-roast-400: #c3977b;
  --color-medium-roast-500: #aa7d60;
  --color-medium-roast-600: #8f6449;
  --color-medium-roast-700: #775036;
  --color-medium-roast-800: #623f28;
  --color-medium-roast-900: #51321e;
  --color-medium-roast-950: #411c00;
}