Spruce

Crisp and resinous — spruce carries the cool, blue-toned green of high-altitude conifers.

Shades 11

Base #0a5c4e

RGB 10, 92, 78

100

200

300

400

500

600

700

800

All Spruce Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --spruce-50: #eef9f6;
  --spruce-100: #d1efe7;
  --spruce-200: #a3dfcf;
  --spruce-300: #6bc7b1;
  --spruce-400: #36a48f;
  --spruce-500: #0a5c4e;
  --spruce-600: #084a3f;
  --spruce-700: #06382f;
  --spruce-800: #042620;
  --spruce-900: #021512;
  --spruce-950: #010a09;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        spruce: {
          50: '#eef9f6',
          100: '#d1efe7',
          200: '#a3dfcf',
          300: '#6bc7b1',
          400: '#36a48f',
          500: '#0a5c4e',
          600: '#084a3f',
          700: '#06382f',
          800: '#042620',
          900: '#021512',
          950: '#010a09',
        },
      },
    },
  },
};

SCSS Map

$spruce-palette: (
  50: #eef9f6,
  100: #d1efe7,
  200: #a3dfcf,
  300: #6bc7b1,
  400: #36a48f,
  500: #0a5c4e,
  600: #084a3f,
  700: #06382f,
  800: #042620,
  900: #021512,
  950: #010a09,
);