Marshmallow Heart to Palm Leaf color palette

F7DDE7Marshmallow Heart 9FC592Oh Pistachio 805A73Indian Silk 5CA399Emerald Oasis 35452DPalm Leaf

About this palette

Marshmallow Heart to Palm Leaf is a 5-color muted, cool palette: #F7DDE7 (Marshmallow Heart), #9FC592 (Oh Pistachio), #805A73 (Indian Silk), #5CA399 (Emerald Oasis), #35452D (Palm Leaf). It mixes gray, green, pink, turquoise tones and feels cool overall. The strongest text pairing is #F7DDE7 on #35452D with a contrast ratio of 8.06:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Marshmallow Heart	rgb(247, 221, 231)	hsl(337, 62%, 92%)
Oh Pistachio	rgb(159, 197, 146)	hsl(105, 31%, 67%)
Indian Silk	rgb(128, 90, 115)	hsl(321, 17%, 43%)
Emerald Oasis	rgb(92, 163, 153)	hsl(172, 28%, 50%)
Palm Leaf	rgb(53, 69, 45)	hsl(100, 21%, 22%)

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.06:1 Very good#F7DDE7 on #35452D
Aa8.06:1 Very good#35452D on #F7DDE7
Aa5.33:1 Good#9FC592 on #35452D
Aa5.33:1 Good#35452D on #9FC592
Aa4.53:1 Good#F7DDE7 on #805A73
Aa4.53:1 Good#805A73 on #F7DDE7
Aa3.51:1 Poor#5CA399 on #35452D
Aa3.51:1 Poor#35452D on #5CA399

Color blindness preview

CSS variables

/* Marshmallow Heart to Palm Leaf — https://swatchly.xyz/palette/f7dde7-9fc592-805a73-5ca399-35452d */
:root {
  --marshmallow-heart: #f7dde7;
  --oh-pistachio: #9fc592;
  --indian-silk: #805a73;
  --emerald-oasis: #5ca399;
  --palm-leaf: #35452d;
}

Tailwind CSS v4

/* Marshmallow Heart to Palm Leaf — https://swatchly.xyz/palette/f7dde7-9fc592-805a73-5ca399-35452d */
@theme {
  --color-marshmallow-heart: #f7dde7;
  --color-marshmallow-heart-50: #fbebf1;
  --color-marshmallow-heart-100: #f7dde7;
  --color-marshmallow-heart-200: #e0ccd4;
  --color-marshmallow-heart-300: #ccb6bf;
  --color-marshmallow-heart-400: #af97a0;
  --color-marshmallow-heart-500: #947d86;
  --color-marshmallow-heart-600: #7a646d;
  --color-marshmallow-heart-700: #634f57;
  --color-marshmallow-heart-800: #4e3d44;
  --color-marshmallow-heart-900: #3d2e34;
  --color-marshmallow-heart-950: #261c20;
  --color-oh-pistachio: #9fc592;
  --color-oh-pistachio-50: #e2f9da;
  --color-oh-pistachio-100: #d4eecc;
  --color-oh-pistachio-200: #bcdbb2;
  --color-oh-pistachio-300: #9fc592;
  --color-oh-pistachio-400: #83a676;
  --color-oh-pistachio-500: #698c5c;
  --color-oh-pistachio-600: #517345;
  --color-oh-pistachio-700: #3e5c33;
  --color-oh-pistachio-800: #2f4a25;
  --color-oh-pistachio-900: #233a1a;
  --color-oh-pistachio-950: #14240e;
  --color-indian-silk: #805a73;
  --color-indian-silk-50: #fff0f9;
  --color-indian-silk-100: #fde1f3;
  --color-indian-silk-200: #eccbe0;
  --color-indian-silk-300: #d7b2ca;
  --color-indian-silk-400: #b991aa;
  --color-indian-silk-500: #9c758e;
  --color-indian-silk-600: #805a73;
  --color-indian-silk-700: #67465c;
  --color-indian-silk-800: #523548;
  --color-indian-silk-900: #402838;
  --color-indian-silk-950: #291823;
  --color-emerald-oasis: #5ca399;
  --color-emerald-oasis-50: #d2faf3;
  --color-emerald-oasis-100: #c1efe7;
  --color-emerald-oasis-200: #a3dbd2;
  --color-emerald-oasis-300: #84c4ba;
  --color-emerald-oasis-400: #5ca399;
  --color-emerald-oasis-500: #428a80;
  --color-emerald-oasis-600: #2a7168;
  --color-emerald-oasis-700: #185b53;
  --color-emerald-oasis-800: #0b4942;
  --color-emerald-oasis-900: #033a34;
  --color-emerald-oasis-950: #002621;
  --color-palm-leaf: #35452d;
  --color-palm-leaf-50: #eef9e9;
  --color-palm-leaf-100: #e3f0dd;
  --color-palm-leaf-200: #ceddc7;
  --color-palm-leaf-300: #b6c6ae;
  --color-palm-leaf-400: #95a78c;
  --color-palm-leaf-500: #798b70;
  --color-palm-leaf-600: #5f7056;
  --color-palm-leaf-700: #495841;
  --color-palm-leaf-800: #35452d;
  --color-palm-leaf-900: #293424;
  --color-palm-leaf-950: #182014;
}