Forest

Deep woodland richness — forest green symbolizes endurance and stability.

Shades 11

Base #228b22

RGB 34, 139, 34

100

200

300

400

500

600

700

800

All Forest Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --forest-50: #f2fbf2;
  --forest-100: #dff5df;
  --forest-200: #bfeabf;
  --forest-300: #98d998;
  --forest-400: #5fbd5f;
  --forest-500: #228b22;
  --forest-600: #1d741d;
  --forest-700: #165916;
  --forest-800: #104010;
  --forest-900: #082608;
  --forest-950: #041304;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        forest: {
          50: '#f2fbf2',
          100: '#dff5df',
          200: '#bfeabf',
          300: '#98d998',
          400: '#5fbd5f',
          500: '#228b22',
          600: '#1d741d',
          700: '#165916',
          800: '#104010',
          900: '#082608',
          950: '#041304',
        },
      },
    },
  },
};

SCSS Map

$forest-palette: (
  50: #f2fbf2,
  100: #dff5df,
  200: #bfeabf,
  300: #98d998,
  400: #5fbd5f,
  500: #228b22,
  600: #1d741d,
  700: #165916,
  800: #104010,
  900: #082608,
  950: #041304,
);