Tailwind-CSS-Farbe neutral

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

Abstufungen von neutral

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

neutral-50

neutral-100

neutral-200

neutral-300

neutral-400

neutral-500

neutral-600

neutral-700

neutral-800

neutral-900

neutral-950

Ganze Palette kopieren

Tailwind v4 (CSS, @theme)

@theme {
  --color-neutral-50: oklch(98.5% 0 none);
  --color-neutral-100: oklch(97% 0 none);
  --color-neutral-200: oklch(92.2% 0 none);
  --color-neutral-300: oklch(87% 0 none);
  --color-neutral-400: oklch(70.8% 0 none);
  --color-neutral-500: oklch(55.6% 0 none);
  --color-neutral-600: oklch(43.9% 0 none);
  --color-neutral-700: oklch(37.1% 0 none);
  --color-neutral-800: oklch(26.9% 0 none);
  --color-neutral-900: oklch(20.5% 0 none);
  --color-neutral-950: oklch(14.5% 0 none);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        neutral: {
          50: '#fafafa',
          100: '#f5f5f5',
          200: '#e5e5e5',
          300: '#d4d4d4',
          400: '#a3a3a3',
          500: '#737373',
          600: '#525252',
          700: '#404040',
          800: '#262626',
          900: '#171717',
          950: '#0a0a0a'
        }
      }
    }
  }
}

CSS-Variablen (HEX)

:root {
  --neutral-50: #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0A0A0A;
}

Weitere Tailwind-Farben

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

Häufige Fragen

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

In Tailwind v3 ist neutral-500 #737373, also rgb(115, 115, 115). In Tailwind v4 ist es als oklch(55.6% 0 none) definiert.

Wie verwende ich Tailwind neutral in meinem Projekt?

Mit Klassen wie bg-neutral-500, text-neutral-700 oder border-neutral-200. In Tailwind v4 kannst du in deinem eigenen CSS auch die CSS-Variable var(--color-neutral-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.