Tailwind CSS emerald color

The 11 shades of Tailwind CSS emerald, from emerald-50 (lightest) to emerald-950 (darkest). Click any value to copy it.

emerald shades

HEX and RGB from Tailwind v3; OKLCH from Tailwind v4. Click a value to copy it.

emerald-50

emerald-100

emerald-200

emerald-300

emerald-400

emerald-500

emerald-600

emerald-700

emerald-800

emerald-900

emerald-950

Copy the whole palette

Tailwind v4 (CSS, @theme)

@theme {
  --color-emerald-50: oklch(97.9% 0.021 166.113);
  --color-emerald-100: oklch(95% 0.052 163.051);
  --color-emerald-200: oklch(90.5% 0.093 164.15);
  --color-emerald-300: oklch(84.5% 0.143 164.978);
  --color-emerald-400: oklch(76.5% 0.177 163.223);
  --color-emerald-500: oklch(69.6% 0.17 162.48);
  --color-emerald-600: oklch(59.6% 0.145 163.225);
  --color-emerald-700: oklch(50.8% 0.118 165.612);
  --color-emerald-800: oklch(43.2% 0.095 166.913);
  --color-emerald-900: oklch(37.8% 0.077 168.94);
  --color-emerald-950: oklch(26.2% 0.051 172.552);
}

Tailwind v3 (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'
        }
      }
    }
  }
}

CSS variables (HEX)

: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;
}

More Tailwind colors

slate gray zinc neutral stone red orange amber yellow lime green teal cyan sky blue indigo violet purple fuchsia pink rose

Frequently asked questions

What is the HEX code for Tailwind emerald-500?

In Tailwind v3, emerald-500 is #10B981, which is rgb(16, 185, 129). In Tailwind v4 it is defined as oklch(69.6% 0.17 162.48).

How do I use Tailwind emerald in my project?

With classes like bg-emerald-500, text-emerald-700 or border-emerald-200. In Tailwind v4 you can also use the CSS variable var(--color-emerald-500) in your own CSS.

Other frameworks

Tailwind CSS, Material Design and Bootstrap are trademarks of their respective owners. The values come from their public documentation and packages: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.