Winter Wizard to Zucchini color palette

About this palette

Winter Wizard to Zucchini is a 5-color cool palette: #93DFFD (Winter Wizard), #874F27 (Precious Copper), #80C040 (Kiwi Crush), #B45ED0 (Love Priestess), #1C4626 (Zucchini). It mixes blue, brown, green, purple tones and feels cool overall. The strongest text pairing is #93DFFD on #1C4626 with a contrast ratio of 7.28:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Winter Wizardrgb(147, 223, 253)hsl(197, 96%, 78%)
Precious Copperrgb(135, 79, 39)hsl(25, 55%, 34%)
Kiwi Crushrgb(128, 192, 64)hsl(90, 50%, 50%)
Love Priestessrgb(180, 94, 208)hsl(285, 55%, 59%)
Zucchinirgb(28, 70, 38)hsl(134, 43%, 19%)

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.

  • Aa7.28:1 Very good#93DFFD on #1C4626
  • Aa7.28:1 Very good#1C4626 on #93DFFD
  • Aa4.88:1 Good#80C040 on #1C4626
  • Aa4.88:1 Good#1C4626 on #80C040
  • Aa4.47:1 Poor#93DFFD on #874F27
  • Aa4.47:1 Poor#874F27 on #93DFFD

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Winter Wizard to Zucchini — https://swatchly.xyz/palette/93dffd-874f27-80c040-b45ed0-1c4626 */
:root {
  --winter-wizard: #93dffd;
  --precious-copper: #874f27;
  --kiwi-crush: #80c040;
  --love-priestess: #b45ed0;
  --zucchini: #1c4626;
}

Tailwind CSS v4

/* Winter Wizard to Zucchini — https://swatchly.xyz/palette/93dffd-874f27-80c040-b45ed0-1c4626 */
@theme {
  --color-winter-wizard: #93dffd;
  --color-winter-wizard-50: #e0f6ff;
  --color-winter-wizard-100: #c6eeff;
  --color-winter-wizard-200: #93dffd;
  --color-winter-wizard-300: #87c8e1;
  --color-winter-wizard-400: #61a9c5;
  --color-winter-wizard-500: #438fab;
  --color-winter-wizard-600: #27748f;
  --color-winter-wizard-700: #105d75;
  --color-winter-wizard-800: #004a5f;
  --color-winter-wizard-900: #00394a;
  --color-winter-wizard-950: #00232f;
  --color-precious-copper: #874f27;
  --color-precious-copper-50: #fff2eb;
  --color-precious-copper-100: #ffe6d6;
  --color-precious-copper-200: #feceb0;
  --color-precious-copper-300: #edb895;
  --color-precious-copper-400: #d39872;
  --color-precious-copper-500: #b97d56;
  --color-precious-copper-600: #9e643d;
  --color-precious-copper-700: #874f27;
  --color-precious-copper-800: #6c3c1a;
  --color-precious-copper-900: #552d0f;
  --color-precious-copper-950: #381b05;
  --color-kiwi-crush: #80c040;
  --color-kiwi-crush-50: #eeffe2;
  --color-kiwi-crush-100: #d7ffb9;
  --color-kiwi-crush-200: #c0ef9a;
  --color-kiwi-crush-300: #a6dc79;
  --color-kiwi-crush-400: #80c040;
  --color-kiwi-crush-500: #64a219;
  --color-kiwi-crush-600: #4d8200;
  --color-kiwi-crush-700: #3c6700;
  --color-kiwi-crush-800: #2d5000;
  --color-kiwi-crush-900: #213d00;
  --color-kiwi-crush-950: #122500;
  --color-love-priestess: #b45ed0;
  --color-love-priestess-50: #fbf2ff;
  --color-love-priestess-100: #f8e4ff;
  --color-love-priestess-200: #f1c8ff;
  --color-love-priestess-300: #e8a5ff;
  --color-love-priestess-400: #cf7ceb;
  --color-love-priestess-500: #b45ed0;
  --color-love-priestess-600: #9642b1;
  --color-love-priestess-700: #7b2c93;
  --color-love-priestess-800: #631c78;
  --color-love-priestess-900: #4e1060;
  --color-love-priestess-950: #32063f;
  --color-zucchini: #1c4626;
  --color-zucchini-50: #e4fde7;
  --color-zucchini-100: #d7f4db;
  --color-zucchini-200: #c0e2c5;
  --color-zucchini-300: #a4cbaa;
  --color-zucchini-400: #80ac87;
  --color-zucchini-500: #638f6b;
  --color-zucchini-600: #497251;
  --color-zucchini-700: #345a3c;
  --color-zucchini-800: #1c4626;
  --color-zucchini-900: #1a351f;
  --color-zucchini-950: #0d2011;
}

Similar palettes