Sage

Muted and meditative — sage brings the calming essence of herb gardens and quiet mornings.

Shades 11

Base #87ae86

RGB 135, 174, 134

100

200

300

400

500

600

700

800

All Sage Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --sage-50: #f4f8f4;
  --sage-100: #e4ede4;
  --sage-200: #ccdccc;
  --sage-300: #adc8ad;
  --sage-400: #87ae86;
  --sage-500: #6a946a;
  --sage-600: #527452;
  --sage-700: #3d573d;
  --sage-800: #293b29;
  --sage-900: #172217;
  --sage-950: #0b110b;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        sage: {
          50: '#f4f8f4',
          100: '#e4ede4',
          200: '#ccdccc',
          300: '#adc8ad',
          400: '#87ae86',
          500: '#6a946a',
          600: '#527452',
          700: '#3d573d',
          800: '#293b29',
          900: '#172217',
          950: '#0b110b',
        },
      },
    },
  },
};

SCSS Map

$sage-palette: (
  50: #f4f8f4,
  100: #e4ede4,
  200: #ccdccc,
  300: #adc8ad,
  400: #87ae86,
  500: #6a946a,
  600: #527452,
  700: #3d573d,
  800: #293b29,
  900: #172217,
  950: #0b110b,
);