Evergreen to Wax Color Palette

About this palette

Evergreen to Wax is a 5-color cool, earthy, gradient palette: #135847 (Evergreen), #4D714A (Irish Clover), #7C8949 (Overgrown Citadel), #AAA242 (Martian), #D9BB33 (Wax). It mixes turquoise, green, yellow tones and feels cool overall. The strongest text pairing is #135847 on #D9BB33 with a contrast ratio of 4.42:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Evergreen	rgb(19, 88, 71)	hsl(165, 64%, 21%)
Irish Clover	rgb(77, 113, 74)	hsl(115, 21%, 37%)
Overgrown Citadel	rgb(124, 137, 73)	hsl(72, 30%, 41%)
Martian	rgb(170, 162, 66)	hsl(55, 44%, 46%)
Wax	rgb(217, 187, 51)	hsl(49, 69%, 53%)

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.

Aa4.42:1 Poor#135847 on #D9BB33
Aa4.42:1 Poor#D9BB33 on #135847
Aa3.16:1 Poor#135847 on #AAA242
Aa3.16:1 Poor#AAA242 on #135847

Color blindness preview

CSS variables

/* Evergreen to Wax — https://swatchly.xyz/palette/135847-4d714a-7c8949-aaa242-d9bb33 */
:root {
  --evergreen: #135847;
  --irish-clover: #4d714a;
  --overgrown-citadel: #7c8949;
  --martian: #aaa242;
  --wax: #d9bb33;
}

Tailwind CSS v4

/* Evergreen to Wax — https://swatchly.xyz/palette/135847-4d714a-7c8949-aaa242-d9bb33 */
@theme {
  --color-evergreen: #135847;
  --color-evergreen-50: #dbfef2;
  --color-evergreen-100: #cef6e8;
  --color-evergreen-200: #b4e4d3;
  --color-evergreen-300: #9ad0be;
  --color-evergreen-400: #77b3a0;
  --color-evergreen-500: #5b9a86;
  --color-evergreen-600: #41806e;
  --color-evergreen-700: #2e6a59;
  --color-evergreen-800: #135847;
  --color-evergreen-900: #124437;
  --color-evergreen-950: #062c22;
  --color-irish-clover: #4d714a;
  --color-irish-clover-50: #e6fde4;
  --color-irish-clover-100: #d9f3d7;
  --color-irish-clover-200: #c1dfbe;
  --color-irish-clover-300: #a7c9a3;
  --color-irish-clover-400: #84a981;
  --color-irish-clover-500: #688d64;
  --color-irish-clover-600: #4d714a;
  --color-irish-clover-700: #3b5a38;
  --color-irish-clover-800: #2b4729;
  --color-irish-clover-900: #20371e;
  --color-irish-clover-950: #122311;
  --color-overgrown-citadel: #7c8949;
  --color-overgrown-citadel-50: #f0fad4;
  --color-overgrown-citadel-100: #e5efc5;
  --color-overgrown-citadel-200: #d0dcaa;
  --color-overgrown-citadel-300: #b8c58c;
  --color-overgrown-citadel-400: #98a567;
  --color-overgrown-citadel-500: #7c8949;
  --color-overgrown-citadel-600: #636f31;
  --color-overgrown-citadel-700: #4e581f;
  --color-overgrown-citadel-800: #3c4512;
  --color-overgrown-citadel-900: #2e3609;
  --color-overgrown-citadel-950: #1c2203;
  --color-martian: #aaa242;
  --color-martian-50: #faf7c4;
  --color-martian-100: #f1edb4;
  --color-martian-200: #ded994;
  --color-martian-300: #c8c272;
  --color-martian-400: #aaa242;
  --color-martian-500: #8f8722;
  --color-martian-600: #746c00;
  --color-martian-700: #5c5600;
  --color-martian-800: #484300;
  --color-martian-900: #383400;
  --color-martian-950: #232000;
  --color-wax: #d9bb33;
  --color-wax-50: #fff3c4;
  --color-wax-100: #fbe89e;
  --color-wax-200: #ead479;
  --color-wax-300: #d9bb33;
  --color-wax-400: #b99c00;
  --color-wax-500: #9a8200;
  --color-wax-600: #7c6900;
  --color-wax-700: #635300;
  --color-wax-800: #4e4100;
  --color-wax-900: #3d3200;
  --color-wax-950: #261f00;
}