Palm Leaf to Sip of Mint Color Palette

About this palette

Palm Leaf to Sip of Mint is a 5-color muted, earthy palette: #314936 (Palm Leaf), #BBAA84 (Bangalore), #5C6744 (Monstera), #8D836D (Antique), #DDDDC8 (Sip of Mint). It mixes green, yellow, gray tones and feels cool overall. The strongest text pairing is #314936 on #DDDDC8 with a contrast ratio of 7.14:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Palm Leaf	rgb(49, 73, 54)	hsl(132, 20%, 24%)
Bangalore	rgb(187, 170, 132)	hsl(41, 29%, 63%)
Monstera	rgb(92, 103, 68)	hsl(79, 20%, 34%)
Antique	rgb(141, 131, 109)	hsl(41, 13%, 49%)
Sip of Mint	rgb(221, 221, 200)	hsl(60, 24%, 83%)

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.14:1 Very good#314936 on #DDDDC8
Aa7.14:1 Very good#DDDDC8 on #314936
Aa4.38:1 Poor#5C6744 on #DDDDC8
Aa4.38:1 Poor#DDDDC8 on #5C6744
Aa4.30:1 Poor#314936 on #BBAA84
Aa4.30:1 Poor#BBAA84 on #314936

Color blindness preview

CSS variables

/* Palm Leaf to Sip of Mint — https://swatchly.xyz/palette/314936-bbaa84-5c6744-8d836d-ddddc8 */
:root {
  --palm-leaf: #314936;
  --bangalore: #bbaa84;
  --monstera: #5c6744;
  --antique: #8d836d;
  --sip-of-mint: #ddddc8;
}

Tailwind CSS v4

/* Palm Leaf to Sip of Mint — https://swatchly.xyz/palette/314936-bbaa84-5c6744-8d836d-ddddc8 */
@theme {
  --color-palm-leaf: #314936;
  --color-palm-leaf-50: #eafaed;
  --color-palm-leaf-100: #dff1e2;
  --color-palm-leaf-200: #c9decd;
  --color-palm-leaf-300: #b0c8b5;
  --color-palm-leaf-400: #8fa994;
  --color-palm-leaf-500: #748e79;
  --color-palm-leaf-600: #5a735f;
  --color-palm-leaf-700: #455c49;
  --color-palm-leaf-800: #314936;
  --color-palm-leaf-900: #27382a;
  --color-palm-leaf-950: #172319;
  --color-bangalore: #bbaa84;
  --color-bangalore-50: #fff8e9;
  --color-bangalore-100: #faf0d9;
  --color-bangalore-200: #eadec2;
  --color-bangalore-300: #d6c8a9;
  --color-bangalore-400: #bbaa84;
  --color-bangalore-500: #9d8d68;
  --color-bangalore-600: #80704d;
  --color-bangalore-700: #675837;
  --color-bangalore-800: #504427;
  --color-bangalore-900: #3d331a;
  --color-bangalore-950: #261e0d;
  --color-monstera: #5c6744;
  --color-monstera-50: #f1f9e3;
  --color-monstera-100: #e5edd4;
  --color-monstera-200: #ced9bb;
  --color-monstera-300: #b5c19f;
  --color-monstera-400: #94a07c;
  --color-monstera-500: #77835f;
  --color-monstera-600: #5c6744;
  --color-monstera-700: #485234;
  --color-monstera-800: #384026;
  --color-monstera-900: #2b321b;
  --color-monstera-950: #1a1f0f;
  --color-antique: #8d836d;
  --color-antique-50: #faf4e7;
  --color-antique-100: #f1eadb;
  --color-antique-200: #ded6c4;
  --color-antique-300: #c8bfaa;
  --color-antique-400: #a99f89;
  --color-antique-500: #8d836d;
  --color-antique-600: #736954;
  --color-antique-700: #5c5340;
  --color-antique-800: #484130;
  --color-antique-900: #383224;
  --color-antique-950: #231e14;
  --color-sip-of-mint: #ddddc8;
  --color-sip-of-mint-50: #f9f9ed;
  --color-sip-of-mint-100: #efefe3;
  --color-sip-of-mint-200: #ddddc8;
  --color-sip-of-mint-300: #c5c5b4;
  --color-sip-of-mint-400: #a5a592;
  --color-sip-of-mint-500: #898976;
  --color-sip-of-mint-600: #6e6e5c;
  --color-sip-of-mint-700: #575746;
  --color-sip-of-mint-800: #444335;
  --color-sip-of-mint-900: #343427;
  --color-sip-of-mint-950: #202017;
}