Woodland Grass to Snarky Mint Color Palette

About this palette

Woodland Grass to Snarky Mint is a 5-color cool, monochromatic, gradient palette: #0F4300 (Woodland Grass), #467C20 (Master Chief), #649F5C (Savage Garden), #87BC83 (Verde), #9AE97C (Snarky Mint). It mixes green tones and feels cool overall. The strongest text pairing is #0F4300 on #9AE97C with a contrast ratio of 7.85:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Woodland Grass	rgb(15, 67, 0)	hsl(107, 100%, 13%)
Master Chief	rgb(70, 124, 32)	hsl(95, 59%, 31%)
Savage Garden	rgb(100, 159, 92)	hsl(113, 27%, 49%)
Verde	rgb(135, 188, 131)	hsl(116, 30%, 63%)
Snarky Mint	rgb(154, 233, 124)	hsl(103, 71%, 70%)

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.85:1 Very good#0F4300 on #9AE97C
Aa7.85:1 Very good#9AE97C on #0F4300
Aa5.24:1 Good#0F4300 on #87BC83
Aa5.24:1 Good#87BC83 on #0F4300
Aa3.65:1 Poor#0F4300 on #649F5C
Aa3.65:1 Poor#649F5C on #0F4300
Aa3.44:1 Poor#467C20 on #9AE97C
Aa3.44:1 Poor#9AE97C on #467C20

Color blindness preview

CSS variables

/* Woodland Grass to Snarky Mint — https://swatchly.xyz/palette/0f4300-467c20-649f5c-87bc83-9ae97c */
:root {
  --woodland-grass: #0f4300;
  --master-chief: #467c20;
  --savage-garden: #649f5c;
  --verde: #87bc83;
  --snarky-mint: #9ae97c;
}

Tailwind CSS v4

/* Woodland Grass to Snarky Mint — https://swatchly.xyz/palette/0f4300-467c20-649f5c-87bc83-9ae97c */
@theme {
  --color-woodland-grass: #0f4300;
  --color-woodland-grass-50: #e2ffdc;
  --color-woodland-grass-100: #d4f7cd;
  --color-woodland-grass-200: #bce5b3;
  --color-woodland-grass-300: #a2d097;
  --color-woodland-grass-400: #7fb274;
  --color-woodland-grass-500: #639858;
  --color-woodland-grass-600: #4a7d3f;
  --color-woodland-grass-700: #37652c;
  --color-woodland-grass-800: #28511e;
  --color-woodland-grass-900: #0f4300;
  --color-woodland-grass-950: #0f2909;
  --color-master-chief: #467c20;
  --color-master-chief-50: #e4ffd7;
  --color-master-chief-100: #d3f8c0;
  --color-master-chief-200: #bbe7a4;
  --color-master-chief-300: #a0d285;
  --color-master-chief-400: #7db35e;
  --color-master-chief-500: #60983e;
  --color-master-chief-600: #467c20;
  --color-master-chief-700: #33630b;
  --color-master-chief-800: #254e00;
  --color-master-chief-900: #1b3c00;
  --color-master-chief-950: #0e2600;
  --color-savage-garden: #649f5c;
  --color-savage-garden-50: #e6ffe2;
  --color-savage-garden-100: #d5facf;
  --color-savage-garden-200: #beeab7;
  --color-savage-garden-300: #a4d69c;
  --color-savage-garden-400: #81b979;
  --color-savage-garden-500: #649f5c;
  --color-savage-garden-600: #498241;
  --color-savage-garden-700: #33682c;
  --color-savage-garden-800: #23521d;
  --color-savage-garden-900: #173f11;
  --color-savage-garden-950: #0a2807;
  --color-verde: #87bc83;
  --color-verde-50: #edffeb;
  --color-verde-100: #dbfbd8;
  --color-verde-200: #c5ebc2;
  --color-verde-300: #acd8a8;
  --color-verde-400: #87bc83;
  --color-verde-500: #6a9e67;
  --color-verde-600: #4e814b;
  --color-verde-700: #386736;
  --color-verde-800: #275025;
  --color-verde-900: #1b3d19;
  --color-verde-950: #0d260c;
  --color-snarky-mint: #9ae97c;
  --color-snarky-mint-50: #d4ffc5;
  --color-snarky-mint-100: #c3f7b0;
  --color-snarky-mint-200: #9ae97c;
  --color-snarky-mint-300: #8dd073;
  --color-snarky-mint-400: #69b34b;
  --color-snarky-mint-500: #4d982a;
  --color-snarky-mint-600: #337d02;
  --color-snarky-mint-700: #276400;
  --color-snarky-mint-800: #1d5000;
  --color-snarky-mint-900: #153d00;
  --color-snarky-mint-950: #0a2700;
}