Palm Leaf to Homoeopathic Green color palette

38432FPalm Leaf 4D6F60Dark Forest 618883Aloe Vera 97BAABLichen E3EAD5Homoeopathic Green

About this palette

Palm Leaf to Homoeopathic Green is a 5-color muted, cool, gradient palette: #38432F (Palm Leaf), #4D6F60 (Dark Forest), #618883 (Aloe Vera), #97BAAB (Lichen), #E3EAD5 (Homoeopathic Green). It mixes green, turquoise, gray tones and feels cool overall. The strongest text pairing is #38432F on #E3EAD5 with a contrast ratio of 8.45:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Palm Leaf	rgb(56, 67, 47)	hsl(93, 18%, 22%)
Dark Forest	rgb(77, 111, 96)	hsl(154, 18%, 37%)
Aloe Vera	rgb(97, 136, 131)	hsl(172, 17%, 46%)
Lichen	rgb(151, 186, 171)	hsl(154, 20%, 66%)
Homoeopathic Green	rgb(227, 234, 213)	hsl(80, 33%, 88%)

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.45:1 Very good#38432F on #E3EAD5
Aa8.45:1 Very good#E3EAD5 on #38432F
Aa4.93:1 Good#38432F on #97BAAB
Aa4.93:1 Good#97BAAB on #38432F
Aa4.52:1 Good#4D6F60 on #E3EAD5
Aa4.52:1 Good#E3EAD5 on #4D6F60
Aa3.17:1 Poor#618883 on #E3EAD5
Aa3.17:1 Poor#E3EAD5 on #618883

Color blindness preview

CSS variables

/* Palm Leaf to Homoeopathic Green — https://swatchly.xyz/palette/38432f-4d6f60-618883-97baab-e3ead5 */
:root {
  --palm-leaf: #38432f;
  --dark-forest: #4d6f60;
  --aloe-vera: #618883;
  --lichen: #97baab;
  --homoeopathic-green: #e3ead5;
}

Tailwind CSS v4

/* Palm Leaf to Homoeopathic Green — https://swatchly.xyz/palette/38432f-4d6f60-618883-97baab-e3ead5 */
@theme {
  --color-palm-leaf: #38432f;
  --color-palm-leaf-50: #f0f8ea;
  --color-palm-leaf-100: #e6efdf;
  --color-palm-leaf-200: #d1dbc9;
  --color-palm-leaf-300: #b9c5b0;
  --color-palm-leaf-400: #98a58f;
  --color-palm-leaf-500: #7c8973;
  --color-palm-leaf-600: #626e59;
  --color-palm-leaf-700: #4c5643;
  --color-palm-leaf-800: #38432f;
  --color-palm-leaf-900: #2b3325;
  --color-palm-leaf-950: #1a1f15;
  --color-dark-forest: #4d6f60;
  --color-dark-forest-50: #e6fbf1;
  --color-dark-forest-100: #d9f1e5;
  --color-dark-forest-200: #c1ddd0;
  --color-dark-forest-300: #a7c6b8;
  --color-dark-forest-400: #84a797;
  --color-dark-forest-500: #688b7b;
  --color-dark-forest-600: #4d6f60;
  --color-dark-forest-700: #3b584b;
  --color-dark-forest-800: #2b453a;
  --color-dark-forest-900: #20362c;
  --color-dark-forest-950: #12221b;
  --color-aloe-vera: #618883;
  --color-aloe-vera-50: #e2faf6;
  --color-aloe-vera-100: #d5efeb;
  --color-aloe-vera-200: #bcdbd7;
  --color-aloe-vera-300: #a1c4bf;
  --color-aloe-vera-400: #7ea49f;
  --color-aloe-vera-500: #618883;
  --color-aloe-vera-600: #496e6a;
  --color-aloe-vera-700: #375854;
  --color-aloe-vera-800: #284642;
  --color-aloe-vera-900: #1d3633;
  --color-aloe-vera-950: #102220;
  --color-lichen: #97baab;
  --color-lichen-50: #effff8;
  --color-lichen-100: #e5f9f0;
  --color-lichen-200: #d1e9de;
  --color-lichen-300: #bad6c9;
  --color-lichen-400: #97baab;
  --color-lichen-500: #7a9b8d;
  --color-lichen-600: #5d7e70;
  --color-lichen-700: #456457;
  --color-lichen-800: #334d42;
  --color-lichen-900: #243a31;
  --color-lichen-950: #13231d;
  --color-homoeopathic-green: #e3ead5;
  --color-homoeopathic-green-50: #eff3e7;
  --color-homoeopathic-green-100: #e3ead5;
  --color-homoeopathic-green-200: #d1d6c7;
  --color-homoeopathic-green-300: #bbc1af;
  --color-homoeopathic-green-400: #9ca28f;
  --color-homoeopathic-green-500: #828875;
  --color-homoeopathic-green-600: #686e5c;
  --color-homoeopathic-green-700: #535847;
  --color-homoeopathic-green-800: #404536;
  --color-homoeopathic-green-900: #313529;
  --color-homoeopathic-green-950: #1e2118;
}