Pine

Crisp mountain air and evergreen resilience — pine is nature's quiet permanence.

Shades 11

Base #2d6a4f

RGB 45, 106, 79

100

200

300

400

500

600

700

800

All Pine Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --pine-50: #f0f9f5;
  --pine-100: #d8f0e4;
  --pine-200: #b0e0c9;
  --pine-300: #7dc8a8;
  --pine-400: #4ea882;
  --pine-500: #2d6a4f;
  --pine-600: #22533e;
  --pine-700: #193e2e;
  --pine-800: #102c20;
  --pine-900: #081a13;
  --pine-950: #030d09;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        pine: {
          50: '#f0f9f5',
          100: '#d8f0e4',
          200: '#b0e0c9',
          300: '#7dc8a8',
          400: '#4ea882',
          500: '#2d6a4f',
          600: '#22533e',
          700: '#193e2e',
          800: '#102c20',
          900: '#081a13',
          950: '#030d09',
        },
      },
    },
  },
};

SCSS Map

$pine-palette: (
  50: #f0f9f5,
  100: #d8f0e4,
  200: #b0e0c9,
  300: #7dc8a8,
  400: #4ea882,
  500: #2d6a4f,
  600: #22533e,
  700: #193e2e,
  800: #102c20,
  900: #081a13,
  950: #030d09,
);