Droplet to Peach Scone Color Palette

About this palette

Droplet to Peach Scone is a 4-color pastel, light palette: #9BDEFF (Droplet), #FBDEFC (Grape Taffy), #E7E4AB (French Vanilla), #FFBEB4 (Peach Scone). It mixes blue, pink, yellow tones and feels balanced overall. The strongest text pairing is #FBDEFC on #FFBEB4 with a contrast ratio of 1.28:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Droplet	rgb(155, 222, 255)	hsl(200, 100%, 80%)
Grape Taffy	rgb(251, 222, 252)	hsl(298, 83%, 93%)
French Vanilla	rgb(231, 228, 171)	hsl(57, 56%, 79%)
Peach Scone	rgb(255, 190, 180)	hsl(8, 100%, 85%)

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 Peach Scone — https://swatchly.xyz/palette/9bdeff-fbdefc-e7e4ab-ffbeb4 */
:root {
  --droplet: #9bdeff;
  --grape-taffy: #fbdefc;
  --french-vanilla: #e7e4ab;
  --peach-scone: #ffbeb4;
}

Tailwind CSS v4

/* Droplet to Peach Scone — https://swatchly.xyz/palette/9bdeff-fbdefc-e7e4ab-ffbeb4 */
@theme {
  --color-droplet: #9bdeff;
  --color-droplet-50: #e4f6ff;
  --color-droplet-100: #cceeff;
  --color-droplet-200: #9bdeff;
  --color-droplet-300: #8ec7e3;
  --color-droplet-400: #69a8c7;
  --color-droplet-500: #4c8dac;
  --color-droplet-600: #327390;
  --color-droplet-700: #1e5c76;
  --color-droplet-800: #0f4960;
  --color-droplet-900: #05384c;
  --color-droplet-950: #012331;
  --color-grape-taffy: #fbdefc;
  --color-grape-taffy-50: #feedfe;
  --color-grape-taffy-100: #fbdefc;
  --color-grape-taffy-200: #e3cee4;
  --color-grape-taffy-300: #ceb6cf;
  --color-grape-taffy-400: #b196b1;
  --color-grape-taffy-500: #957b97;
  --color-grape-taffy-600: #7b627c;
  --color-grape-taffy-700: #634c64;
  --color-grape-taffy-800: #4e3b4f;
  --color-grape-taffy-900: #3d2c3d;
  --color-grape-taffy-950: #261b27;
  --color-french-vanilla: #e7e4ab;
  --color-french-vanilla-50: #fefde1;
  --color-french-vanilla-100: #f6f5d5;
  --color-french-vanilla-200: #e7e4ab;
  --color-french-vanilla-300: #cdcb9e;
  --color-french-vanilla-400: #adaa77;
  --color-french-vanilla-500: #908d58;
  --color-french-vanilla-600: #74713d;
  --color-french-vanilla-700: #5c5928;
  --color-french-vanilla-800: #474419;
  --color-french-vanilla-900: #37340f;
  --color-french-vanilla-950: #222006;
  --color-peach-scone: #ffbeb4;
  --color-peach-scone-50: #ffebe8;
  --color-peach-scone-100: #ffdcd6;
  --color-peach-scone-200: #ffbeb4;
  --color-peach-scone-300: #e3aba3;
  --color-peach-scone-400: #c78c83;
  --color-peach-scone-500: #ac7169;
  --color-peach-scone-600: #905951;
  --color-peach-scone-700: #77443d;
  --color-peach-scone-800: #60342e;
  --color-peach-scone-900: #4c2722;
  --color-peach-scone-950: #311713;
}