Darkest Forest to Sour Color Palette

About this palette

Darkest Forest to Sour is a 5-color cool, earthy, monochromatic, gradient palette: #2A3510 (Darkest Forest), #59663D (Monstera), #7A8F4A (Four Leaf Clover), #A2BE66 (Sapling), #E3F1B2 (Sour). It mixes green tones and feels cool overall. The strongest text pairing is #2A3510 on #E3F1B2 with a contrast ratio of 10.83:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Darkest Forest	rgb(42, 53, 16)	hsl(78, 54%, 14%)
Monstera	rgb(89, 102, 61)	hsl(79, 25%, 32%)
Four Leaf Clover	rgb(122, 143, 74)	hsl(78, 32%, 43%)
Sapling	rgb(162, 190, 102)	hsl(79, 40%, 57%)
Sour	rgb(227, 241, 178)	hsl(73, 69%, 82%)

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.

Aa10.83:1 Very good#2A3510 on #E3F1B2
Aa10.83:1 Very good#E3F1B2 on #2A3510
Aa6.25:1 Good#2A3510 on #A2BE66
Aa6.25:1 Good#A2BE66 on #2A3510
Aa5.16:1 Good#59663D on #E3F1B2
Aa5.16:1 Good#E3F1B2 on #59663D
Aa3.63:1 Poor#2A3510 on #7A8F4A
Aa3.63:1 Poor#7A8F4A on #2A3510

Color blindness preview

CSS variables

/* Darkest Forest to Sour — https://swatchly.xyz/palette/2a3510-59663d-7a8f4a-a2be66-e3f1b2 */
:root {
  --darkest-forest: #2a3510;
  --monstera: #59663d;
  --four-leaf-clover: #7a8f4a;
  --sapling: #a2be66;
  --sour: #e3f1b2;
}

Tailwind CSS v4

/* Darkest Forest to Sour — https://swatchly.xyz/palette/2a3510-59663d-7a8f4a-a2be66-e3f1b2 */
@theme {
  --color-darkest-forest: #2a3510;
  --color-darkest-forest-50: #f0f9e2;
  --color-darkest-forest-100: #e6f0d5;
  --color-darkest-forest-200: #d1ddbd;
  --color-darkest-forest-300: #bac7a3;
  --color-darkest-forest-400: #99a780;
  --color-darkest-forest-500: #7e8b64;
  --color-darkest-forest-600: #63704a;
  --color-darkest-forest-700: #4d5936;
  --color-darkest-forest-800: #3b4427;
  --color-darkest-forest-900: #2a3510;
  --color-darkest-forest-950: #1a200e;
  --color-monstera: #59663d;
  --color-monstera-50: #f0f9e0;
  --color-monstera-100: #e6f0d4;
  --color-monstera-200: #d3dfbe;
  --color-monstera-300: #becba6;
  --color-monstera-400: #a0ae85;
  --color-monstera-500: #86956a;
  --color-monstera-600: #6e7b52;
  --color-monstera-700: #59663d;
  --color-monstera-800: #45502d;
  --color-monstera-900: #343e20;
  --color-monstera-950: #202711;
  --color-four-leaf-clover: #7a8f4a;
  --color-four-leaf-clover-50: #eefcd4;
  --color-four-leaf-clover-100: #e3f2c6;
  --color-four-leaf-clover-200: #cee0ab;
  --color-four-leaf-clover-300: #b6ca8d;
  --color-four-leaf-clover-400: #95ab68;
  --color-four-leaf-clover-500: #7a8f4a;
  --color-four-leaf-clover-600: #617431;
  --color-four-leaf-clover-700: #4b5d1d;
  --color-four-leaf-clover-800: #3a490f;
  --color-four-leaf-clover-900: #2c3806;
  --color-four-leaf-clover-950: #1a2302;
  --color-sapling: #a2be66;
  --color-sapling-50: #e3f6c1;
  --color-sapling-100: #d5eaae;
  --color-sapling-200: #bdd58f;
  --color-sapling-300: #a2be66;
  --color-sapling-400: #86a14b;
  --color-sapling-500: #6e882f;
  --color-sapling-600: #586f15;
  --color-sapling-700: #455a00;
  --color-sapling-800: #364800;
  --color-sapling-900: #2b3900;
  --color-sapling-950: #1a2400;
  --color-sour: #e3f1b2;
  --color-sour-50: #f0f8d5;
  --color-sour-100: #e3f1b2;
  --color-sour-200: #d1dcae;
  --color-sour-300: #bbc692;
  --color-sour-400: #9ba86e;
  --color-sour-500: #818c52;
  --color-sour-600: #677239;
  --color-sour-700: #515b26;
  --color-sour-800: #3f4718;
  --color-sour-900: #30370e;
  --color-sour-950: #1d2205;
}