Tailwind CSS-kleur emerald

De 11 tinten van de Tailwind CSS-kleur emerald, van emerald-50 (de lichtste) tot emerald-950 (de donkerste). Klik op een waarde om die te kopiëren.

Tinten van emerald

HEX en RGB uit Tailwind v3; OKLCH uit Tailwind v4. Klik op een waarde om die te kopiëren.

emerald-50

emerald-100

emerald-200

emerald-300

emerald-400

emerald-500

emerald-600

emerald-700

emerald-800

emerald-900

emerald-950

Het hele palet kopiëren

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-variabelen (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;
}

Meer Tailwind-kleuren

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

Veelgestelde vragen

Wat is de HEX-code van Tailwind emerald-500?

In Tailwind v3 is emerald-500 #10B981, oftewel rgb(16, 185, 129). In Tailwind v4 is het gedefinieerd als oklch(69.6% 0.17 162.48).

Hoe gebruik ik Tailwind emerald in mijn project?

Met klassen als bg-emerald-500, text-emerald-700 of border-emerald-200. In Tailwind v4 kun je in je eigen CSS ook de CSS-variabele var(--color-emerald-500) gebruiken.

Andere frameworks

Tailwind CSS, Material Design en Bootstrap zijn merken van hun respectieve eigenaren. De waarden komen uit hun documentatie en openbare pakketten: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.