Monochrome Green Color Palette

Thirty even steps of one green, pale celadon down to deep pine-black. A clean monochromatic value scale for foliage shading, eco and wellness branding, or any design that wants depth from a single hue. Every swatch relates to every other, so gradients and tints fall out for free.

Get Paintrix free on the App Store.

Download

Hex codes

Color theory

Base
Complement
Analogous −30°
Analogous +30°
Triadic

Use it for

foliage shadingeco brandinggradientsmonochrome layouts

Code formats

CSS
:root {
  --mono-green-1: #EEF7EE;
  --mono-green-2: #E1F0E1;
  --mono-green-3: #D4E9D4;
  --mono-green-4: #C7E2C7;
  --mono-green-5: #BADBBA;
  --mono-green-6: #ADD4AD;
  --mono-green-7: #9FCC9F;
  --mono-green-8: #92C492;
  --mono-green-9: #85BC85;
  --mono-green-10: #78B478;
  --mono-green-11: #6BAC6B;
  --mono-green-12: #5FA25F;
  --mono-green-13: #549854;
  --mono-green-14: #4A8E4A;
  --mono-green-15: #418441;
  --mono-green-16: #387A38;
  --mono-green-17: #307030;
  --mono-green-18: #286528;
  --mono-green-19: #225B22;
  --mono-green-20: #1C511C;
  --mono-green-21: #174717;
  --mono-green-22: #123D12;
  --mono-green-23: #0E330E;
  --mono-green-24: #0A2A0A;
  --mono-green-25: #072007;
  --mono-green-26: #051705;
  --mono-green-27: #040F04;
  --mono-green-28: #030A03;
  --mono-green-29: #020602;
  --mono-green-30: #010301;
}
SCSS
$mono-green-1: #EEF7EE;
$mono-green-2: #E1F0E1;
$mono-green-3: #D4E9D4;
$mono-green-4: #C7E2C7;
$mono-green-5: #BADBBA;
$mono-green-6: #ADD4AD;
$mono-green-7: #9FCC9F;
$mono-green-8: #92C492;
$mono-green-9: #85BC85;
$mono-green-10: #78B478;
$mono-green-11: #6BAC6B;
$mono-green-12: #5FA25F;
$mono-green-13: #549854;
$mono-green-14: #4A8E4A;
$mono-green-15: #418441;
$mono-green-16: #387A38;
$mono-green-17: #307030;
$mono-green-18: #286528;
$mono-green-19: #225B22;
$mono-green-20: #1C511C;
$mono-green-21: #174717;
$mono-green-22: #123D12;
$mono-green-23: #0E330E;
$mono-green-24: #0A2A0A;
$mono-green-25: #072007;
$mono-green-26: #051705;
$mono-green-27: #040F04;
$mono-green-28: #030A03;
$mono-green-29: #020602;
$mono-green-30: #010301;
Tailwind
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'mono-green': {
          '1': '#EEF7EE',
          '2': '#E1F0E1',
          '3': '#D4E9D4',
          '4': '#C7E2C7',
          '5': '#BADBBA',
          '6': '#ADD4AD',
          '7': '#9FCC9F',
          '8': '#92C492',
          '9': '#85BC85',
          '10': '#78B478',
          '11': '#6BAC6B',
          '12': '#5FA25F',
          '13': '#549854',
          '14': '#4A8E4A',
          '15': '#418441',
          '16': '#387A38',
          '17': '#307030',
          '18': '#286528',
          '19': '#225B22',
          '20': '#1C511C',
          '21': '#174717',
          '22': '#123D12',
          '23': '#0E330E',
          '24': '#0A2A0A',
          '25': '#072007',
          '26': '#051705',
          '27': '#040F04',
          '28': '#030A03',
          '29': '#020602',
          '30': '#010301',
        },
      },
    },
  },
};
JSON
{
  "name": "Monochrome Green",
  "colors": [
    "#EEF7EE",
    "#E1F0E1",
    "#D4E9D4",
    "#C7E2C7",
    "#BADBBA",
    "#ADD4AD",
    "#9FCC9F",
    "#92C492",
    "#85BC85",
    "#78B478",
    "#6BAC6B",
    "#5FA25F",
    "#549854",
    "#4A8E4A",
    "#418441",
    "#387A38",
    "#307030",
    "#286528",
    "#225B22",
    "#1C511C",
    "#174717",
    "#123D12",
    "#0E330E",
    "#0A2A0A",
    "#072007",
    "#051705",
    "#040F04",
    "#030A03",
    "#020602",
    "#010301"
  ]
}
Hex list
#EEF7EE
#E1F0E1
#D4E9D4
#C7E2C7
#BADBBA
#ADD4AD
#9FCC9F
#92C492
#85BC85
#78B478
#6BAC6B
#5FA25F
#549854
#4A8E4A
#418441
#387A38
#307030
#286528
#225B22
#1C511C
#174717
#123D12
#0E330E
#0A2A0A
#072007
#051705
#040F04
#030A03
#020602
#010301

Related palettes

Copied