Caribbean to Zucchini color palette

C1F3E8Caribbean 99B080Foliage 34A866Secret Garden 636B38Jungle Civilization 10482EZucchini

About this palette

Caribbean to Zucchini is a 5-color cool, earthy, gradient palette: #C1F3E8 (Caribbean), #99B080 (Foliage), #34A866 (Secret Garden), #636B38 (Jungle Civilization), #10482E (Zucchini). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #C1F3E8 on #10482E with a contrast ratio of 8.68:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Caribbean	rgb(193, 243, 232)	hsl(167, 68%, 85%)
Foliage	rgb(153, 176, 128)	hsl(89, 23%, 60%)
Secret Garden	rgb(52, 168, 102)	hsl(146, 53%, 43%)
Jungle Civilization	rgb(99, 107, 56)	hsl(69, 31%, 32%)
Zucchini	rgb(16, 72, 46)	hsl(152, 64%, 17%)

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.68:1 Very good#C1F3E8 on #10482E
Aa8.68:1 Very good#10482E on #C1F3E8
Aa4.67:1 Good#C1F3E8 on #636B38
Aa4.67:1 Good#636B38 on #C1F3E8
Aa4.46:1 Poor#99B080 on #10482E
Aa4.46:1 Poor#10482E on #99B080
Aa3.49:1 Poor#34A866 on #10482E
Aa3.49:1 Poor#10482E on #34A866

Color blindness preview

CSS variables

/* Caribbean to Zucchini — https://swatchly.xyz/palette/c1f3e8-99b080-34a866-636b38-10482e */
:root {
  --caribbean: #c1f3e8;
  --foliage: #99b080;
  --secret-garden: #34a866;
  --jungle-civilization: #636b38;
  --zucchini: #10482e;
}

Tailwind CSS v4

/* Caribbean to Zucchini — https://swatchly.xyz/palette/c1f3e8-99b080-34a866-636b38-10482e */
@theme {
  --color-caribbean: #c1f3e8;
  --color-caribbean-50: #dcf9f2;
  --color-caribbean-100: #c1f3e8;
  --color-caribbean-200: #b8ddd5;
  --color-caribbean-300: #9ec8bf;
  --color-caribbean-400: #7caaa1;
  --color-caribbean-500: #619086;
  --color-caribbean-600: #48756c;
  --color-caribbean-700: #345e56;
  --color-caribbean-800: #254a43;
  --color-caribbean-900: #1a3934;
  --color-caribbean-950: #0d2420;
  --color-foliage: #99b080;
  --color-foliage-50: #effde2;
  --color-foliage-100: #e5f4d6;
  --color-foliage-200: #d1e2bf;
  --color-foliage-300: #bacea5;
  --color-foliage-400: #99b080;
  --color-foliage-500: #7d9365;
  --color-foliage-600: #62774a;
  --color-foliage-700: #4c5f36;
  --color-foliage-800: #3a4a26;
  --color-foliage-900: #2b391a;
  --color-foliage-950: #19230d;
  --color-secret-garden: #34a866;
  --color-secret-garden-50: #e4ffeb;
  --color-secret-garden-100: #c6ffd7;
  --color-secret-garden-200: #a7f1be;
  --color-secret-garden-300: #87dea5;
  --color-secret-garden-400: #5cc282;
  --color-secret-garden-500: #34a866;
  --color-secret-garden-600: #008a4b;
  --color-secret-garden-700: #006d3a;
  --color-secret-garden-800: #00552c;
  --color-secret-garden-900: #004120;
  --color-secret-garden-950: #002912;
  --color-jungle-civilization: #636b38;
  --color-jungle-civilization-50: #f3f9db;
  --color-jungle-civilization-100: #e8eecc;
  --color-jungle-civilization-200: #d2dab1;
  --color-jungle-civilization-300: #bbc394;
  --color-jungle-civilization-400: #9aa370;
  --color-jungle-civilization-500: #7e8753;
  --color-jungle-civilization-600: #636b38;
  --color-jungle-civilization-700: #4e5528;
  --color-jungle-civilization-800: #3d421b;
  --color-jungle-civilization-900: #2f3312;
  --color-jungle-civilization-950: #1c2008;
  --color-zucchini: #10482e;
  --color-zucchini-50: #e0feeb;
  --color-zucchini-100: #d3f5e0;
  --color-zucchini-200: #bae3ca;
  --color-zucchini-300: #9ecdb1;
  --color-zucchini-400: #79ad8f;
  --color-zucchini-500: #5b9173;
  --color-zucchini-600: #417458;
  --color-zucchini-700: #2d5b43;
  --color-zucchini-800: #10482e;
  --color-zucchini-900: #143624;
  --color-zucchini-950: #092115;
}