Water to Zucchini Color Palette

About this palette

Water to Zucchini is a 6-color cool palette: #CCF2FF (Water), #FFB0DE (Fresh Gum), #F0625B (Flattered Flamingo), #0095A3 (Oasis), #3C7447 (Parsley Sprig), #004B30 (Zucchini). It mixes blue, pink, red, turquoise, green tones and feels cool overall. The strongest text pairing is #CCF2FF on #004B30 with a contrast ratio of 8.64:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water	rgb(204, 242, 255)	hsl(195, 100%, 90%)
Fresh Gum	rgb(255, 176, 222)	hsl(325, 100%, 85%)
Flattered Flamingo	rgb(240, 98, 91)	hsl(3, 83%, 65%)
Oasis	rgb(0, 149, 163)	hsl(185, 100%, 32%)
Parsley Sprig	rgb(60, 116, 71)	hsl(132, 32%, 35%)
Zucchini	rgb(0, 75, 48)	hsl(158, 100%, 15%)

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.

Aa8.64:1 Very good#CCF2FF on #004B30
Aa8.64:1 Very good#004B30 on #CCF2FF
Aa6.11:1 Good#FFB0DE on #004B30
Aa6.11:1 Good#004B30 on #FFB0DE
Aa4.68:1 Good#CCF2FF on #3C7447
Aa4.68:1 Good#3C7447 on #CCF2FF
Aa3.31:1 Poor#FFB0DE on #3C7447
Aa3.31:1 Poor#3C7447 on #FFB0DE

Color blindness preview

CSS variables

/* Water to Zucchini — https://swatchly.xyz/palette/ccf2ff-ffb0de-f0625b-0095a3-3c7447-004b30 */
:root {
  --water: #ccf2ff;
  --fresh-gum: #ffb0de;
  --flattered-flamingo: #f0625b;
  --oasis: #0095a3;
  --parsley-sprig: #3c7447;
  --zucchini: #004b30;
}

Tailwind CSS v4

/* Water to Zucchini — https://swatchly.xyz/palette/ccf2ff-ffb0de-f0625b-0095a3-3c7447-004b30 */
@theme {
  --color-water: #ccf2ff;
  --color-water-50: #e6f8ff;
  --color-water-100: #ccf2ff;
  --color-water-200: #c1dce6;
  --color-water-300: #a7c7d1;
  --color-water-400: #85a8b3;
  --color-water-500: #698c98;
  --color-water-600: #50727d;
  --color-water-700: #3c5b65;
  --color-water-800: #2c4750;
  --color-water-900: #20373e;
  --color-water-950: #112227;
  --color-fresh-gum: #ffb0de;
  --color-fresh-gum-50: #ffe5f3;
  --color-fresh-gum-100: #ffd3eb;
  --color-fresh-gum-200: #ffb0de;
  --color-fresh-gum-300: #e49fc7;
  --color-fresh-gum-400: #c87fab;
  --color-fresh-gum-500: #ae6591;
  --color-fresh-gum-600: #924e78;
  --color-fresh-gum-700: #793b61;
  --color-fresh-gum-800: #632c4e;
  --color-fresh-gum-900: #4e203d;
  --color-fresh-gum-950: #331126;
  --color-flattered-flamingo: #f0625b;
  --color-flattered-flamingo-50: #ffecea;
  --color-flattered-flamingo-100: #ffdcd8;
  --color-flattered-flamingo-200: #ffbdb6;
  --color-flattered-flamingo-300: #ff968d;
  --color-flattered-flamingo-400: #f0625b;
  --color-flattered-flamingo-500: #d24642;
  --color-flattered-flamingo-600: #b32c2c;
  --color-flattered-flamingo-700: #95161b;
  --color-flattered-flamingo-800: #7a050f;
  --color-flattered-flamingo-900: #630008;
  --color-flattered-flamingo-950: #430003;
  --color-oasis: #0095a3;
  --color-oasis-50: #defbff;
  --color-oasis-100: #baf7ff;
  --color-oasis-200: #97e5f0;
  --color-oasis-300: #73d0dc;
  --color-oasis-400: #41b1bf;
  --color-oasis-500: #0095a3;
  --color-oasis-600: #007884;
  --color-oasis-700: #005f69;
  --color-oasis-800: #004b52;
  --color-oasis-900: #003a40;
  --color-oasis-950: #002429;
  --color-parsley-sprig: #3c7447;
  --color-parsley-sprig-50: #dfffe3;
  --color-parsley-sprig-100: #d0f5d5;
  --color-parsley-sprig-200: #b6e2bc;
  --color-parsley-sprig-300: #9acca1;
  --color-parsley-sprig-400: #75ad7e;
  --color-parsley-sprig-500: #589061;
  --color-parsley-sprig-600: #3c7447;
  --color-parsley-sprig-700: #2b5d35;
  --color-parsley-sprig-800: #1d4927;
  --color-parsley-sprig-900: #14391c;
  --color-parsley-sprig-950: #09240f;
  --color-zucchini: #004b30;
  --color-zucchini-50: #dcffec;
  --color-zucchini-100: #cff6e0;
  --color-zucchini-200: #b5e4cb;
  --color-zucchini-300: #98cfb2;
  --color-zucchini-400: #73af90;
  --color-zucchini-500: #559374;
  --color-zucchini-600: #3a775a;
  --color-zucchini-700: #265e44;
  --color-zucchini-800: #004b30;
  --color-zucchini-900: #0d3826;
  --color-zucchini-950: #052316;
}