Clear Water to Grape Taffy Color Palette

About this palette

Clear Water to Grape Taffy is a 4-color pastel, light, cool palette: #A3D3D5 (Clear Water), #E4CDAD (Boutique Beige), #A8EAE6 (Freezy Breezy), #F7DFFD (Grape Taffy). It mixes turquoise, yellow, purple tones and feels cool overall. The strongest text pairing is #A3D3D5 on #F7DFFD with a contrast ratio of 1.32:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Clear Water	rgb(163, 211, 213)	hsl(182, 37%, 74%)
Boutique Beige	rgb(228, 205, 173)	hsl(35, 50%, 79%)
Freezy Breezy	rgb(168, 234, 230)	hsl(176, 61%, 79%)
Grape Taffy	rgb(247, 223, 253)	hsl(288, 88%, 93%)

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

/* Clear Water to Grape Taffy — https://swatchly.xyz/palette/a3d3d5-e4cdad-a8eae6-f7dffd */
:root {
  --clear-water: #a3d3d5;
  --boutique-beige: #e4cdad;
  --freezy-breezy: #a8eae6;
  --grape-taffy: #f7dffd;
}

Tailwind CSS v4

/* Clear Water to Grape Taffy — https://swatchly.xyz/palette/a3d3d5-e4cdad-a8eae6-f7dffd */
@theme {
  --color-clear-water: #a3d3d5;
  --color-clear-water-50: #e8feff;
  --color-clear-water-100: #dbf7f8;
  --color-clear-water-200: #c4e6e7;
  --color-clear-water-300: #a3d3d5;
  --color-clear-water-400: #85b1b3;
  --color-clear-water-500: #679496;
  --color-clear-water-600: #4b787a;
  --color-clear-water-700: #366061;
  --color-clear-water-800: #264a4c;
  --color-clear-water-900: #19393a;
  --color-clear-water-950: #0d2324;
  --color-boutique-beige: #e4cdad;
  --color-boutique-beige-50: #fceedc;
  --color-boutique-beige-100: #f2e3ce;
  --color-boutique-beige-200: #e4cdad;
  --color-boutique-beige-300: #ccb89d;
  --color-boutique-beige-400: #af9a7c;
  --color-boutique-beige-500: #957f62;
  --color-boutique-beige-600: #7a664a;
  --color-boutique-beige-700: #635137;
  --color-boutique-beige-800: #4f3f29;
  --color-boutique-beige-900: #3e301d;
  --color-boutique-beige-950: #271d0f;
  --color-freezy-breezy: #a8eae6;
  --color-freezy-breezy-50: #e1fffd;
  --color-freezy-breezy-100: #d1f8f5;
  --color-freezy-breezy-200: #a8eae6;
  --color-freezy-breezy-300: #9ad0cd;
  --color-freezy-breezy-400: #74b1ae;
  --color-freezy-breezy-500: #559592;
  --color-freezy-breezy-600: #3a7976;
  --color-freezy-breezy-700: #25615e;
  --color-freezy-breezy-800: #154c4a;
  --color-freezy-breezy-900: #0b3b39;
  --color-freezy-breezy-950: #032524;
  --color-grape-taffy: #f7dffd;
  --color-grape-taffy-50: #fbeeff;
  --color-grape-taffy-100: #f7dffd;
  --color-grape-taffy-200: #e0cee4;
  --color-grape-taffy-300: #cbb7d0;
  --color-grape-taffy-400: #ad98b3;
  --color-grape-taffy-500: #927d98;
  --color-grape-taffy-600: #78637d;
  --color-grape-taffy-700: #604e65;
  --color-grape-taffy-800: #4c3c50;
  --color-grape-taffy-900: #3b2d3e;
  --color-grape-taffy-950: #251b27;
}