Start generating

Zucchini to Woodland Soul color palette

004F35ZucchiniBAECFFBreaking the Ice330C103AM Breakup00BBF6Blue BikiniA46463Cinnapink007D4AWoodland Soul
Open in generator Export PNG, PDF, ASE…

About this palette

Zucchini to Woodland Soul is a 6-color cool palette: #004F35 (Zucchini), #BAECFF (Breaking the Ice), #330C10 (3AM Breakup), #00BBF6 (Blue Bikini), #A46463 (Cinnapink), #007D4A (Woodland Soul). It mixes green, blue, brown, red tones and feels cool overall. The strongest text pairing is #BAECFF on #330C10 with a contrast ratio of 13.77:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Zucchinirgb(0, 79, 53)hsl(160, 100%, 15%)
Breaking the Icergb(186, 236, 255)hsl(197, 100%, 86%)
3AM Breakuprgb(51, 12, 16)hsl(354, 62%, 12%)
Blue Bikinirgb(0, 187, 246)hsl(194, 100%, 48%)
Cinnapinkrgb(164, 100, 99)hsl(1, 26%, 52%)
Woodland Soulrgb(0, 125, 74)hsl(156, 100%, 25%)

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.

  • Aa13.77:1 Super#BAECFF on #330C10
  • Aa13.77:1 Super#330C10 on #BAECFF
  • Aa7.86:1 Very good#330C10 on #00BBF6
  • Aa7.86:1 Very good#00BBF6 on #330C10
  • Aa7.62:1 Very good#004F35 on #BAECFF
  • Aa7.62:1 Very good#BAECFF on #004F35
  • Aa4.35:1 Poor#004F35 on #00BBF6
  • Aa4.35:1 Poor#00BBF6 on #004F35

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Zucchini to Woodland Soul — https://swatchly.xyz/palette/004f35-baecff-330c10-00bbf6-a46463-007d4a */
:root {
  --zucchini: #004f35;
  --breaking-the-ice: #baecff;
  --c-3am-breakup: #330c10;
  --blue-bikini: #00bbf6;
  --cinnapink: #a46463;
  --woodland-soul: #007d4a;
}

Tailwind CSS v4

/* Zucchini to Woodland Soul — https://swatchly.xyz/palette/004f35-baecff-330c10-00bbf6-a46463-007d4a */
@theme {
  --color-zucchini: #004f35;
  --color-zucchini-50: #dcffed;
  --color-zucchini-100: #cef6e2;
  --color-zucchini-200: #b4e5cc;
  --color-zucchini-300: #98d0b4;
  --color-zucchini-400: #72b193;
  --color-zucchini-500: #549678;
  --color-zucchini-600: #3a7a5e;
  --color-zucchini-700: #266249;
  --color-zucchini-800: #004f35;
  --color-zucchini-900: #0c3c29;
  --color-zucchini-950: #042618;
  --color-breaking-the-ice: #baecff;
  --color-breaking-the-ice-50: #d7f4ff;
  --color-breaking-the-ice-100: #baecff;
  --color-breaking-the-ice-200: #b2d8e6;
  --color-breaking-the-ice-300: #99c3d3;
  --color-breaking-the-ice-400: #77a6b7;
  --color-breaking-the-ice-500: #5c8c9d;
  --color-breaking-the-ice-600: #447282;
  --color-breaking-the-ice-700: #325c6b;
  --color-breaking-the-ice-800: #224855;
  --color-breaking-the-ice-900: #173843;
  --color-breaking-the-ice-950: #0b232b;
  --color-c-3am-breakup: #330c10;
  --color-c-3am-breakup-50: #fff1f1;
  --color-c-3am-breakup-100: #ffe4e4;
  --color-c-3am-breakup-200: #f5cccc;
  --color-c-3am-breakup-300: #e2b4b4;
  --color-c-3am-breakup-400: #c59393;
  --color-c-3am-breakup-500: #a87677;
  --color-c-3am-breakup-600: #8a5c5d;
  --color-c-3am-breakup-700: #6f4647;
  --color-c-3am-breakup-800: #583435;
  --color-c-3am-breakup-900: #432627;
  --color-c-3am-breakup-950: #330c10;
  --color-blue-bikini: #00bbf6;
  --color-blue-bikini-50: #f1faff;
  --color-blue-bikini-100: #dff4ff;
  --color-blue-bikini-200: #b6e7ff;
  --color-blue-bikini-300: #7fd6ff;
  --color-blue-bikini-400: #00bbf6;
  --color-blue-bikini-500: #009bcd;
  --color-blue-bikini-600: #007da5;
  --color-blue-bikini-700: #006283;
  --color-blue-bikini-800: #004c67;
  --color-blue-bikini-900: #003a4f;
  --color-blue-bikini-950: #002332;
  --color-cinnapink: #a46463;
  --color-cinnapink-50: #fff1f1;
  --color-cinnapink-100: #ffe7e6;
  --color-cinnapink-200: #ffcfcd;
  --color-cinnapink-300: #f1b7b5;
  --color-cinnapink-400: #d79795;
  --color-cinnapink-500: #be7d7b;
  --color-cinnapink-600: #a46463;
  --color-cinnapink-700: #874c4c;
  --color-cinnapink-800: #6c3939;
  --color-cinnapink-900: #55292a;
  --color-cinnapink-950: #371818;
  --color-woodland-soul: #007d4a;
  --color-woodland-soul-50: #ddffe9;
  --color-woodland-soul-100: #c1fbd6;
  --color-woodland-soul-200: #a3e9be;
  --color-woodland-soul-300: #82d4a3;
  --color-woodland-soul-400: #57b580;
  --color-woodland-soul-500: #339964;
  --color-woodland-soul-600: #007d4a;
  --color-woodland-soul-700: #00633a;
  --color-woodland-soul-800: #004e2c;
  --color-woodland-soul-900: #003c21;
  --color-woodland-soul-950: #002613;
}

Similar palettes