Color emerald de Tailwind CSS

Los 11 tonos del color emerald de Tailwind CSS, del emerald-50 (el más claro) al emerald-950 (el más oscuro). Haz clic en cualquier valor para copiarlo.

Tonos de emerald

HEX y RGB de Tailwind v3; OKLCH de Tailwind v4. Haz clic en un valor para copiarlo.

emerald-50

emerald-100

emerald-200

emerald-300

emerald-400

emerald-500

emerald-600

emerald-700

emerald-800

emerald-900

emerald-950

Copiar toda la paleta

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'
        }
      }
    }
  }
}

Variables CSS (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;
}

Otros colores de Tailwind

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

Preguntas frecuentes

¿Cuál es el código HEX de Tailwind emerald-500?

En Tailwind v3, emerald-500 es #10B981, es decir rgb(16, 185, 129). En Tailwind v4 se define como oklch(69.6% 0.17 162.48).

¿Cómo uso Tailwind emerald en mi proyecto?

Con clases como bg-emerald-500, text-emerald-700 o border-emerald-200. En Tailwind v4 también puedes usar la variable CSS var(--color-emerald-500) en tu propio CSS.

Otros frameworks

Tailwind CSS, Material Design y Bootstrap son marcas de sus respectivos dueños. Los valores salen de su documentación y sus paquetes públicos: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.