Zucchini to Vaporised Color Palette

About this palette

Zucchini to Vaporised is a 4-color cool, gradient palette: #004232 (Zucchini), #2E8572 (Emerald Whispers), #76B8D5 (Milky Waves), #CFF4F7 (Vaporised). It mixes turquoise, blue, white tones and feels cool overall. The strongest text pairing is #004232 on #CFF4F7 with a contrast ratio of 9.83:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Zucchini	rgb(0, 66, 50)	hsl(165, 100%, 13%)
Emerald Whispers	rgb(46, 133, 114)	hsl(167, 49%, 35%)
Milky Waves	rgb(118, 184, 213)	hsl(198, 53%, 65%)
Vaporised	rgb(207, 244, 247)	hsl(184, 71%, 89%)

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.

Aa9.83:1 Very good#004232 on #CFF4F7
Aa9.83:1 Very good#CFF4F7 on #004232
Aa5.25:1 Good#004232 on #76B8D5
Aa5.25:1 Good#76B8D5 on #004232
Aa3.80:1 Poor#2E8572 on #CFF4F7
Aa3.80:1 Poor#CFF4F7 on #2E8572

Color blindness preview

CSS variables

/* Zucchini to Vaporised — https://swatchly.xyz/palette/004232-2e8572-76b8d5-cff4f7 */
:root {
  --zucchini: #004232;
  --emerald-whispers: #2e8572;
  --milky-waves: #76b8d5;
  --vaporised: #cff4f7;
}

Tailwind CSS v4

/* Zucchini to Vaporised — https://swatchly.xyz/palette/004232-2e8572-76b8d5-cff4f7 */
@theme {
  --color-zucchini: #004232;
  --color-zucchini-50: #defef1;
  --color-zucchini-100: #d1f5e7;
  --color-zucchini-200: #b8e3d3;
  --color-zucchini-300: #9dcdbb;
  --color-zucchini-400: #7ab09c;
  --color-zucchini-500: #5d9582;
  --color-zucchini-600: #447b69;
  --color-zucchini-700: #306453;
  --color-zucchini-800: #215042;
  --color-zucchini-900: #004232;
  --color-zucchini-950: #0a2920;
  --color-emerald-whispers: #2e8572;
  --color-emerald-whispers-50: #d9fff4;
  --color-emerald-whispers-100: #c8f9eb;
  --color-emerald-whispers-200: #afe9d9;
  --color-emerald-whispers-300: #92d6c3;
  --color-emerald-whispers-400: #6bb9a5;
  --color-emerald-whispers-500: #4c9f8b;
  --color-emerald-whispers-600: #2e8572;
  --color-emerald-whispers-700: #136b5a;
  --color-emerald-whispers-800: #005446;
  --color-emerald-whispers-900: #004135;
  --color-emerald-whispers-950: #002921;
  --color-milky-waves: #76b8d5;
  --color-milky-waves-50: #f3fbff;
  --color-milky-waves-100: #e1f5ff;
  --color-milky-waves-200: #bbe8fd;
  --color-milky-waves-300: #a0d4ec;
  --color-milky-waves-400: #76b8d5;
  --color-milky-waves-500: #599ab6;
  --color-milky-waves-600: #3b7c97;
  --color-milky-waves-700: #24637b;
  --color-milky-waves-800: #124d62;
  --color-milky-waves-900: #063a4c;
  --color-milky-waves-950: #012330;
  --color-vaporised: #cff4f7;
  --color-vaporised-50: #e6fafc;
  --color-vaporised-100: #cff4f7;
  --color-vaporised-200: #c3dee0;
  --color-vaporised-300: #aac8ca;
  --color-vaporised-400: #88a9ac;
  --color-vaporised-500: #6b8e90;
  --color-vaporised-600: #527375;
  --color-vaporised-700: #3d5b5e;
  --color-vaporised-800: #2d484a;
  --color-vaporised-900: #213739;
  --color-vaporised-950: #122224;
}