Tailwind-CSS-Farbe slate

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

Abstufungen von slate

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

slate-50

slate-100

slate-200

slate-300

slate-400

slate-500

slate-600

slate-700

slate-800

slate-900

slate-950

Ganze Palette kopieren

Tailwind v4 (CSS, @theme)

@theme {
  --color-slate-50: oklch(98.4% 0.003 247.858);
  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-200: oklch(92.9% 0.013 255.508);
  --color-slate-300: oklch(86.9% 0.022 252.894);
  --color-slate-400: oklch(70.4% 0.04 256.788);
  --color-slate-500: oklch(55.4% 0.046 257.417);
  --color-slate-600: oklch(44.6% 0.043 257.281);
  --color-slate-700: oklch(37.2% 0.044 257.287);
  --color-slate-800: oklch(27.9% 0.041 260.031);
  --color-slate-900: oklch(20.8% 0.042 265.755);
  --color-slate-950: oklch(12.9% 0.042 264.695);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        slate: {
          50: '#f8fafc',
          100: '#f1f5f9',
          200: '#e2e8f0',
          300: '#cbd5e1',
          400: '#94a3b8',
          500: '#64748b',
          600: '#475569',
          700: '#334155',
          800: '#1e293b',
          900: '#0f172a',
          950: '#020617'
        }
      }
    }
  }
}

CSS-Variablen (HEX)

:root {
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --slate-950: #020617;
}

Weitere Tailwind-Farben

gray zinc neutral 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 slate-500?

In Tailwind v3 ist slate-500 #64748B, also rgb(100, 116, 139). In Tailwind v4 ist es als oklch(55.4% 0.046 257.417) definiert.

Wie verwende ich Tailwind slate in meinem Projekt?

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