Tailwind-CSS-Farbe green

Die 11 Abstufungen der Tailwind-CSS-Farbe green, von green-50 (am hellsten) bis green-950 (am dunkelsten). Klicke auf einen Wert, um ihn zu kopieren.

Abstufungen von green

HEX und RGB aus Tailwind v3, OKLCH aus Tailwind v4. Klicke auf einen Wert, um ihn zu kopieren.

green-50

green-100

green-200

green-300

green-400

green-500

green-600

green-700

green-800

green-900

green-950

Ganze Palette kopieren

Tailwind v4 (CSS, @theme)

@theme {
  --color-green-50: oklch(98.2% 0.018 155.826);
  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-300: oklch(87.1% 0.15 154.449);
  --color-green-400: oklch(79.2% 0.209 151.711);
  --color-green-500: oklch(72.3% 0.219 149.579);
  --color-green-600: oklch(62.7% 0.194 149.214);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-green-800: oklch(44.8% 0.119 151.328);
  --color-green-900: oklch(39.3% 0.095 152.535);
  --color-green-950: oklch(26.6% 0.065 152.934);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        green: {
          50: '#f0fdf4',
          100: '#dcfce7',
          200: '#bbf7d0',
          300: '#86efac',
          400: '#4ade80',
          500: '#22c55e',
          600: '#16a34a',
          700: '#15803d',
          800: '#166534',
          900: '#14532d',
          950: '#052e16'
        }
      }
    }
  }
}

CSS-Variablen (HEX)

:root {
  --green-50: #F0FDF4;
  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-300: #86EFAC;
  --green-400: #4ADE80;
  --green-500: #22C55E;
  --green-600: #16A34A;
  --green-700: #15803D;
  --green-800: #166534;
  --green-900: #14532D;
  --green-950: #052E16;
}

Weitere Tailwind-Farben

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

Häufige Fragen

Wie lautet der HEX-Code von Tailwind green-500?

In Tailwind v3 ist green-500 #22C55E, also rgb(34, 197, 94). In Tailwind v4 ist es als oklch(72.3% 0.219 149.579) definiert.

Wie verwende ich Tailwind green in meinem Projekt?

Mit Klassen wie bg-green-500, text-green-700 oder border-green-200. In Tailwind v4 kannst du in deinem eigenen CSS auch die CSS-Variable var(--color-green-500) verwenden.

Weitere Frameworks

Tailwind CSS, Material Design und Bootstrap sind Marken ihrer jeweiligen Inhaber. Die Werte stammen aus ihrer Dokumentation und ihren öffentlichen Paketen: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.