Green Color Palette: 6 Fresh Shades & Schemes with Hex Codes

Green is the colour of nature, growth, and balance — calming yet full of life. A well-chosen green color palette can feel organic and earthy, fresh and energetic, or rich and luxurious depending on the shade. It is a natural fit for wellness, finance, sustainability, food, and outdoor brands. Here are six green palettes with hex codes and the meaning behind the colour.

Want colours to pair with green instead of shades of it? See what colours go with green. Otherwise pick a palette below or browse the PaletteCSS library.

What green communicates

Green sits between the calming blues and the energising yellows, which gives it a uniquely balanced, restful quality. It is strongly tied to nature, health, growth, and money. Deep greens like emerald and forest feel premium and grounded; bright greens like lime feel fresh and youthful; muted greens like sage and olive feel calm and sophisticated.

The green family includes:

• Mint and emerald — fresh, clean, and modern.
• Forest and pine — deep, grounded, and natural.
• Olive and sage — muted, earthy, and elegant.
• Lime and chartreuse — bright, energetic, and bold.

6 green color palettes (with hex codes)

1. Emerald

Rich, premium green from pale to deep.

#D1FAE5 · #6EE7B7 · #10B981 · #047857 · #064E3B

2. Mint Fresh

Cool, clean, and calming.

#E6FBF1 · #A7F0D1 · #43C59E · #1B7A5A · #0B3D2E

3. Forest Green

Deep and natural, like a woodland canopy.

#E8F5E9 · #A5D6A7 · #66BB6A · #2E7D32 · #1B5E20

4. Olive Green

Warm, earthy, and muted.

#F0F1E3 · #CBD18F · #9AA257 · #6B7233 · #3E4220

5. Teal Green

Green with a cool, watery edge.

#E0F2F1 · #80CBC4 · #26A69A · #00796B · #004D40

6. Lime

Bright and zesty for energetic designs.

#F7FEE7 · #D9F99D · #A3E635 · #65A30D · #365314

How to use a green palette in CSS

:root {
  --green-50:  #D1FAE5;
  --green-200: #6EE7B7;
  --green-400: #10B981;
  --green-600: #047857;
  --green-900: #064E3B;
}

.button { background: var(--green-400); color: #fff; }

A fresh green gradient suits eco and wellness brands:

.hero {
  background: linear-gradient(135deg, #6EE7B7 0%, #047857 100%);
}

Tips for designing with green

• Match shade to mood. Emerald for premium, sage for calm, lime for energy.
• Pair with neutrals. Cream, beige, and warm wood tones make green feel organic.
• Use deep green as a near-black. Forest green text is a softer alternative to black.
• Add gold or terracotta. Warm accents lift an all-green palette.

Frequently asked questions

What is a good green hex code?

A versatile green is #10B981 (emerald); for a deep natural green use #1B5E20, and for a soft background try #D1FAE5.

What does green represent?

Green symbolises nature, growth, health, balance, and money, which makes it popular for wellness, finance, food, and sustainability brands.

What colors go with green?

Green pairs well with cream, beige, brown, gold, navy, and pink. See our full guide on what colours go with green for combinations.

Want more? Browse color palettes, read what colours go with green, or explore sage green palettes.