Emerald

Lush, gemstone richness — emerald radiates luxury and depth.

Shades 11

Base #10b981

RGB 16, 185, 129

100

200

300

400

500

600

700

800

All Emerald Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-900: #064e3b;
  --emerald-950: #022c22;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        emerald: {
          50: '#ecfdf5',
          100: '#d1fae5',
          200: '#a7f3d0',
          300: '#6ee7b7',
          400: '#34d399',
          500: '#10b981',
          600: '#059669',
          700: '#047857',
          800: '#065f46',
          900: '#064e3b',
          950: '#022c22',
        },
      },
    },
  },
};

SCSS Map

$emerald-palette: (
  50: #ecfdf5,
  100: #d1fae5,
  200: #a7f3d0,
  300: #6ee7b7,
  400: #34d399,
  500: #10b981,
  600: #059669,
  700: #047857,
  800: #065f46,
  900: #064e3b,
  950: #022c22,
);