styleColor Scheme

Forest Green

A lush forest palette with layered greens and earthy undertones. Brings the tranquility and richness of a woodland setting.

#ffffff
#fafafa
#059669
#22c55e
#f59e0b

Color Breakdown

Role

background

Name

White

Hex

#ffffff

Tailwind

bg-white

Role

surface

Name

Zinc 50

Hex

#fafafa

Tailwind

bg-zinc-50

Role

primary

Name

Emerald 600

Hex

#059669

Tailwind

text-emerald-600

Role

secondary

Name

Green 500

Hex

#22c55e

Tailwind

text-green-500

Role

accent

Name

Amber 500

Hex

#f59e0b

Tailwind

bg-amber-500

Live Preview

Welcome Back

This is a live preview of the Forest Green color scheme applied to a sample card component. See how the colors work together in a realistic UI context.

Design Rationale

Layered greens from emerald to bright green mimic a forest canopy's depth. Amber accents suggest dappled sunlight filtering through the leaves.

Use Cases

Environmental organizationsOutdoor brandsBotanical gardens

CSS Variables

CSS
:root {
  --background: #ffffff;
  --surface: #fafafa;
  --primary: #059669;
  --secondary: #22c55e;
  --accent: #f59e0b;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'forest-green': {
  'background': '#ffffff',  // bg-white
  'surface': '#fafafa',  // bg-zinc-50
  'primary': '#059669',  // text-emerald-600
  'secondary': '#22c55e',  // text-green-500
  'accent': '#f59e0b',  // bg-amber-500
        },
      },
    },
  },
};

Related Color Schemes

Build with This Scheme

Use our palette generator to customize and extend this color scheme for your project.

Open Palette Generator

Frequently Asked Questions

How do multiple greens create depth?
Using varied green shades creates visual layers that mimic natural depth, much like how forests appear in layered tones.