Marsh Fog to Shadow Purple color palette

C1D6BFMarsh Fog 7AA07BVineyard 6D9174Paying Mantis 806388Sunshone Plum 4B324CShadow Purple

About this palette

Marsh Fog to Shadow Purple is a 5-color muted, cool, earthy palette: #C1D6BF (Marsh Fog), #7AA07B (Vineyard), #6D9174 (Paying Mantis), #806388 (Sunshone Plum), #4B324C (Shadow Purple). It mixes green, purple tones and feels cool overall. The strongest text pairing is #C1D6BF on #4B324C with a contrast ratio of 7.33:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Marsh Fog	rgb(193, 214, 191)	hsl(115, 22%, 79%)
Vineyard	rgb(122, 160, 123)	hsl(122, 17%, 55%)
Paying Mantis	rgb(109, 145, 116)	hsl(132, 14%, 50%)
Sunshone Plum	rgb(128, 99, 136)	hsl(287, 16%, 46%)
Shadow Purple	rgb(75, 50, 76)	hsl(298, 21%, 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.

Aa7.33:1 Very good#C1D6BF on #4B324C
Aa7.33:1 Very good#4B324C on #C1D6BF
Aa3.84:1 Poor#7AA07B on #4B324C
Aa3.84:1 Poor#4B324C on #7AA07B
Aa3.36:1 Poor#C1D6BF on #806388
Aa3.36:1 Poor#806388 on #C1D6BF
Aa3.20:1 Poor#6D9174 on #4B324C
Aa3.20:1 Poor#4B324C on #6D9174

Color blindness preview

CSS variables

/* Marsh Fog to Shadow Purple — https://swatchly.xyz/palette/c1d6bf-7aa07b-6d9174-806388-4b324c */
:root {
  --marsh-fog: #c1d6bf;
  --vineyard: #7aa07b;
  --paying-mantis: #6d9174;
  --sunshone-plum: #806388;
  --shadow-purple: #4b324c;
}

Tailwind CSS v4

/* Marsh Fog to Shadow Purple — https://swatchly.xyz/palette/c1d6bf-7aa07b-6d9174-806388-4b324c */
@theme {
  --color-marsh-fog: #c1d6bf;
  --color-marsh-fog-50: #e7f4e6;
  --color-marsh-fog-100: #dbe9d9;
  --color-marsh-fog-200: #c1d6bf;
  --color-marsh-fog-300: #aec0ac;
  --color-marsh-fog-400: #8fa38d;
  --color-marsh-fog-500: #758973;
  --color-marsh-fog-600: #5d6f5b;
  --color-marsh-fog-700: #495947;
  --color-marsh-fog-800: #384737;
  --color-marsh-fog-900: #2a3729;
  --color-marsh-fog-950: #192218;
  --color-vineyard: #7aa07b;
  --color-vineyard-50: #e0f8e1;
  --color-vineyard-100: #d2edd2;
  --color-vineyard-200: #b9d8b9;
  --color-vineyard-300: #9ec19e;
  --color-vineyard-400: #7aa07b;
  --color-vineyard-500: #628763;
  --color-vineyard-600: #4b6e4c;
  --color-vineyard-700: #39593a;
  --color-vineyard-800: #2b462c;
  --color-vineyard-900: #203821;
  --color-vineyard-950: #132414;
  --color-paying-mantis: #6d9174;
  --color-paying-mantis-50: #e7fcea;
  --color-paying-mantis-100: #dbf3df;
  --color-paying-mantis-200: #c4e0c9;
  --color-paying-mantis-300: #abcbb0;
  --color-paying-mantis-400: #89ac90;
  --color-paying-mantis-500: #6d9174;
  --color-paying-mantis-600: #53765a;
  --color-paying-mantis-700: #3f5e45;
  --color-paying-mantis-800: #2f4a35;
  --color-paying-mantis-900: #223927;
  --color-paying-mantis-950: #132417;
  --color-sunshone-plum: #806388;
  --color-sunshone-plum-50: #fcf1ff;
  --color-sunshone-plum-100: #f8e4fe;
  --color-sunshone-plum-200: #e7cfee;
  --color-sunshone-plum-300: #d3b8da;
  --color-sunshone-plum-400: #b598be;
  --color-sunshone-plum-500: #9b7da3;
  --color-sunshone-plum-600: #806388;
  --color-sunshone-plum-700: #674d6e;
  --color-sunshone-plum-800: #513b58;
  --color-sunshone-plum-900: #3f2c45;
  --color-sunshone-plum-950: #281a2c;
  --color-shadow-purple: #4b324c;
  --color-shadow-purple-50: #ffefff;
  --color-shadow-purple-100: #f8e4f8;
  --color-shadow-purple-200: #e6cfe6;
  --color-shadow-purple-300: #d0b6d1;
  --color-shadow-purple-400: #b194b1;
  --color-shadow-purple-500: #947895;
  --color-shadow-purple-600: #785d78;
  --color-shadow-purple-700: #5e475f;
  --color-shadow-purple-800: #4b324c;
  --color-shadow-purple-900: #382739;
  --color-shadow-purple-950: #231723;
}