Heavy Green to Nature Color Palette

About this palette

Heavy Green to Nature is a 5-color muted, cool palette: #495643 (Heavy Green), #234141 (Emerald Forest), #568073 (Ecological), #92AF9F (Ninja Turtle), #BEDAB7 (Nature). It mixes gray, turquoise, green tones and feels cool overall. The strongest text pairing is #234141 on #BEDAB7 with a contrast ratio of 7.30:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Heavy Green	rgb(73, 86, 67)	hsl(101, 12%, 30%)
Emerald Forest	rgb(35, 65, 65)	hsl(180, 30%, 20%)
Ecological	rgb(86, 128, 115)	hsl(161, 20%, 42%)
Ninja Turtle	rgb(146, 175, 159)	hsl(147, 15%, 63%)
Nature	rgb(190, 218, 183)	hsl(108, 32%, 79%)

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.30:1 Very good#234141 on #BEDAB7
Aa7.30:1 Very good#BEDAB7 on #234141
Aa5.16:1 Good#495643 on #BEDAB7
Aa5.16:1 Good#BEDAB7 on #495643
Aa4.65:1 Good#234141 on #92AF9F
Aa4.65:1 Good#92AF9F on #234141
Aa3.29:1 Poor#495643 on #92AF9F
Aa3.29:1 Poor#92AF9F on #495643

Color blindness preview

CSS variables

/* Heavy Green to Nature — https://swatchly.xyz/palette/495643-234141-568073-92af9f-bedab7 */
:root {
  --heavy-green: #495643;
  --emerald-forest: #234141;
  --ecological: #568073;
  --ninja-turtle: #92af9f;
  --nature: #bedab7;
}

Tailwind CSS v4

/* Heavy Green to Nature — https://swatchly.xyz/palette/495643-234141-568073-92af9f-bedab7 */
@theme {
  --color-heavy-green: #495643;
  --color-heavy-green-50: #f0f8ec;
  --color-heavy-green-100: #e5efe1;
  --color-heavy-green-200: #cfdbca;
  --color-heavy-green-300: #b7c4b1;
  --color-heavy-green-400: #96a490;
  --color-heavy-green-500: #7a8874;
  --color-heavy-green-600: #606d5a;
  --color-heavy-green-700: #495643;
  --color-heavy-green-800: #394334;
  --color-heavy-green-900: #2b3327;
  --color-heavy-green-950: #1a2017;
  --color-emerald-forest: #234141;
  --color-emerald-forest-50: #e7faf9;
  --color-emerald-forest-100: #dbf0f0;
  --color-emerald-forest-200: #c4dddd;
  --color-emerald-forest-300: #a9c6c6;
  --color-emerald-forest-400: #86a6a5;
  --color-emerald-forest-500: #698989;
  --color-emerald-forest-600: #4f6d6d;
  --color-emerald-forest-700: #3a5555;
  --color-emerald-forest-800: #234141;
  --color-emerald-forest-900: #1e3131;
  --color-emerald-forest-950: #101e1e;
  --color-ecological: #568073;
  --color-ecological-50: #e3fcf3;
  --color-ecological-100: #d9f4eb;
  --color-ecological-200: #c4e4d9;
  --color-ecological-300: #abd0c4;
  --color-ecological-400: #8ab3a6;
  --color-ecological-500: #6f998c;
  --color-ecological-600: #568073;
  --color-ecological-700: #3f675b;
  --color-ecological-800: #2e5146;
  --color-ecological-900: #203e35;
  --color-ecological-950: #112721;
  --color-ninja-turtle: #92af9f;
  --color-ninja-turtle-50: #ecfcf3;
  --color-ninja-turtle-100: #e1f3e9;
  --color-ninja-turtle-200: #cce1d5;
  --color-ninja-turtle-300: #b4cdbf;
  --color-ninja-turtle-400: #92af9f;
  --color-ninja-turtle-500: #769283;
  --color-ninja-turtle-600: #5b7668;
  --color-ninja-turtle-700: #465e51;
  --color-ninja-turtle-800: #344a3e;
  --color-ninja-turtle-900: #26382f;
  --color-ninja-turtle-950: #16231c;
  --color-nature: #bedab7;
  --color-nature-50: #e5f6e1;
  --color-nature-100: #d9ecd4;
  --color-nature-200: #bedab7;
  --color-nature-300: #abc3a5;
  --color-nature-400: #8ca685;
  --color-nature-500: #728c6b;
  --color-nature-600: #597253;
  --color-nature-700: #455b40;
  --color-nature-800: #354930;
  --color-nature-900: #283823;
  --color-nature-950: #172314;
}