Palm to Dark Olive Color Palette

About this palette

Palm to Dark Olive is a 5-color cool, earthy, monochromatic palette: #A4B259 (Palm), #556700 (Serrano Pepper), #7F8C3C (Witch Brew), #E3F080 (Illuminating), #2F3A08 (Dark Olive). It mixes green tones and feels cool overall. The strongest text pairing is #E3F080 on #2F3A08 with a contrast ratio of 9.85:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Palm	rgb(164, 178, 89)	hsl(69, 37%, 52%)
Serrano Pepper	rgb(85, 103, 0)	hsl(70, 100%, 20%)
Witch Brew	rgb(127, 140, 60)	hsl(70, 40%, 39%)
Illuminating	rgb(227, 240, 128)	hsl(67, 79%, 72%)
Dark Olive	rgb(47, 58, 8)	hsl(73, 76%, 13%)

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.

Aa9.85:1 Very good#E3F080 on #2F3A08
Aa9.85:1 Very good#2F3A08 on #E3F080
Aa5.26:1 Good#A4B259 on #2F3A08
Aa5.26:1 Good#2F3A08 on #A4B259
Aa5.12:1 Good#556700 on #E3F080
Aa5.12:1 Good#E3F080 on #556700
Aa3.31:1 Poor#7F8C3C on #2F3A08
Aa3.31:1 Poor#2F3A08 on #7F8C3C

Color blindness preview

CSS variables

/* Palm to Dark Olive — https://swatchly.xyz/palette/a4b259-556700-7f8c3c-e3f080-2f3a08 */
:root {
  --palm: #a4b259;
  --serrano-pepper: #556700;
  --witch-brew: #7f8c3c;
  --illuminating: #e3f080;
  --dark-olive: #2f3a08;
}

Tailwind CSS v4

/* Palm to Dark Olive — https://swatchly.xyz/palette/a4b259-556700-7f8c3c-e3f080-2f3a08 */
@theme {
  --color-palm: #a4b259;
  --color-palm-50: #f4fecf;
  --color-palm-100: #ebf6c2;
  --color-palm-200: #d9e4a6;
  --color-palm-300: #c3d087;
  --color-palm-400: #a4b259;
  --color-palm-500: #88953c;
  --color-palm-600: #6c781b;
  --color-palm-700: #555f00;
  --color-palm-800: #424a00;
  --color-palm-900: #323800;
  --color-palm-950: #1e2200;
  --color-serrano-pepper: #556700;
  --color-serrano-pepper-50: #effccd;
  --color-serrano-pepper-100: #e4f3be;
  --color-serrano-pepper-200: #d1e2a4;
  --color-serrano-pepper-300: #bbce86;
  --color-serrano-pepper-400: #9cb160;
  --color-serrano-pepper-500: #829741;
  --color-serrano-pepper-600: #6a7d25;
  --color-serrano-pepper-700: #556700;
  --color-serrano-pepper-800: #425100;
  --color-serrano-pepper-900: #323e00;
  --color-serrano-pepper-950: #1f2700;
  --color-witch-brew: #7f8c3c;
  --color-witch-brew-50: #f1fbce;
  --color-witch-brew-100: #e6f1bf;
  --color-witch-brew-200: #d2dea2;
  --color-witch-brew-300: #bac783;
  --color-witch-brew-400: #9aa85b;
  --color-witch-brew-500: #7f8c3c;
  --color-witch-brew-600: #667121;
  --color-witch-brew-700: #505a0b;
  --color-witch-brew-800: #3e4700;
  --color-witch-brew-900: #303700;
  --color-witch-brew-950: #1d2200;
  --color-illuminating: #e3f080;
  --color-illuminating-50: #eef7b9;
  --color-illuminating-100: #e3f080;
  --color-illuminating-200: #d1db89;
  --color-illuminating-300: #bbc668;
  --color-illuminating-400: #9da83a;
  --color-illuminating-500: #838d06;
  --color-illuminating-600: #6a7200;
  --color-illuminating-700: #545b00;
  --color-illuminating-800: #424700;
  --color-illuminating-900: #323700;
  --color-illuminating-950: #1f2200;
  --color-dark-olive: #2f3a08;
  --color-dark-olive-50: #f1fadd;
  --color-dark-olive-100: #e6f0d0;
  --color-dark-olive-200: #d2deb7;
  --color-dark-olive-300: #bac89c;
  --color-dark-olive-400: #9ba979;
  --color-dark-olive-500: #808e5d;
  --color-dark-olive-600: #667344;
  --color-dark-olive-700: #515c31;
  --color-dark-olive-800: #3f4922;
  --color-dark-olive-900: #2f3a08;
  --color-dark-olive-950: #1d240b;
}