Zucchini to Marsh Fog Color Palette

About this palette

Zucchini to Marsh Fog is a 5-color cool, earthy, monochromatic palette: #004E34 (Zucchini), #4D976C (Natural Orchestra), #8EBBA1 (Lichen), #287D5A (Amazon), #BADAC5 (Marsh Fog). It mixes green tones and feels cool overall. The strongest text pairing is #004E34 on #BADAC5 with a contrast ratio of 6.51:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Zucchini	rgb(0, 78, 52)	hsl(160, 100%, 15%)
Natural Orchestra	rgb(77, 151, 108)	hsl(145, 32%, 45%)
Lichen	rgb(142, 187, 161)	hsl(145, 25%, 65%)
Amazon	rgb(40, 125, 90)	hsl(155, 52%, 32%)
Marsh Fog	rgb(186, 218, 197)	hsl(141, 30%, 79%)

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.

Aa6.51:1 Good#004E34 on #BADAC5
Aa6.51:1 Good#BADAC5 on #004E34
Aa4.57:1 Good#004E34 on #8EBBA1
Aa4.57:1 Good#8EBBA1 on #004E34
Aa3.34:1 Poor#287D5A on #BADAC5
Aa3.34:1 Poor#BADAC5 on #287D5A

Color blindness preview

CSS variables

/* Zucchini to Marsh Fog — https://swatchly.xyz/palette/004e34-4d976c-8ebba1-287d5a-badac5 */
:root {
  --zucchini: #004e34;
  --natural-orchestra: #4d976c;
  --lichen: #8ebba1;
  --amazon: #287d5a;
  --marsh-fog: #badac5;
}

Tailwind CSS v4

/* Zucchini to Marsh Fog — https://swatchly.xyz/palette/004e34-4d976c-8ebba1-287d5a-badac5 */
@theme {
  --color-zucchini: #004e34;
  --color-zucchini-50: #dcffed;
  --color-zucchini-100: #cef6e1;
  --color-zucchini-200: #b4e5cc;
  --color-zucchini-300: #98cfb4;
  --color-zucchini-400: #72b193;
  --color-zucchini-500: #549577;
  --color-zucchini-600: #3a795d;
  --color-zucchini-700: #266148;
  --color-zucchini-800: #004e34;
  --color-zucchini-900: #0d3b29;
  --color-zucchini-950: #042518;
  --color-natural-orchestra: #4d976c;
  --color-natural-orchestra-50: #ddffe8;
  --color-natural-orchestra-100: #caf8da;
  --color-natural-orchestra-200: #afe6c3;
  --color-natural-orchestra-300: #92d1aa;
  --color-natural-orchestra-400: #6cb388;
  --color-natural-orchestra-500: #4d976c;
  --color-natural-orchestra-600: #327c53;
  --color-natural-orchestra-700: #1d633f;
  --color-natural-orchestra-800: #0e4f2f;
  --color-natural-orchestra-900: #043d22;
  --color-natural-orchestra-950: #012713;
  --color-lichen: #8ebba1;
  --color-lichen-50: #edfff4;
  --color-lichen-100: #e0faea;
  --color-lichen-200: #caead7;
  --color-lichen-300: #b2d7c1;
  --color-lichen-400: #8ebba1;
  --color-lichen-500: #719c84;
  --color-lichen-600: #547f67;
  --color-lichen-700: #3e654f;
  --color-lichen-800: #2c4f3c;
  --color-lichen-900: #1e3c2c;
  --color-lichen-950: #0f2419;
  --color-amazon: #287d5a;
  --color-amazon-50: #dcffec;
  --color-amazon-100: #c8f9df;
  --color-amazon-200: #ace7c9;
  --color-amazon-300: #8ed2b0;
  --color-amazon-400: #67b48f;
  --color-amazon-500: #479874;
  --color-amazon-600: #287d5a;
  --color-amazon-700: #136445;
  --color-amazon-800: #014f35;
  --color-amazon-900: #003d28;
  --color-amazon-950: #002717;
  --color-marsh-fog: #badac5;
  --color-marsh-fog-50: #e3f6ea;
  --color-marsh-fog-100: #d7ecde;
  --color-marsh-fog-200: #badac5;
  --color-marsh-fog-300: #a8c3b1;
  --color-marsh-fog-400: #88a692;
  --color-marsh-fog-500: #6e8b78;
  --color-marsh-fog-600: #557260;
  --color-marsh-fog-700: #425b4b;
  --color-marsh-fog-800: #32493a;
  --color-marsh-fog-900: #25382c;
  --color-marsh-fog-950: #15231a;
}