colorize
ColorKit
CK

Tailwind CSS Farb-Generator

Geben Sie Ihre Hauptfarbe ein, und wir berechnen eine mathematisch ausgewogene 50-950 Skala für Tailwind CSS v3 oder v4.

Generated Scale

50

#F1F6FD

100

#E2ECFC

200

#C2D7F9

300

#9EC0F7

400

#75A6F6

500

#3B82F6

600

#1468F0

700

#0F50B9

800

#0C3679

900

#071938

950

#030A17

Component Preview

Buttons

Alerts & Badges

System Update

The server will restart in 5 minutes. (50/500/700/900)

Badge (100/800)Solid (600)

So funktioniert die Farbskala in Tailwind

Tailwind CSS nutzt eine Helligkeitsskala von 50 bis 950, um ein konsistentes und flexibles UI-Designsystem aufzubauen.

  • 50 - 100: Sehr helle Hintergründe und Info-Boxen.
  • 200 - 400: Dezente Rahmen und Hover-Flächen.
  • 500 - 600: Primäre Aktions-Buttons und Standard-Farben.
  • 700 - 950: Lesetext und dunkle Flächen im Dark Mode.
Wissensdatenbank & FAQ

Häufig gestellte Fragen

Direkte Antworten und Lösungen zu häufigen Fragen, technischen Herausforderungen und Webstandards.

Wie berechnet Tailwind CSS seine Abstufungen von 50 bis 950?expand_more
Die numerische Skala von Tailwind ordnet Farbtöne von hell nach dunkel:
  • 50–100: Sehr helle Pastelltöne (~90% bis 95% Helligkeit) für Kartenhintergründe und Hinweise.
  • 200–400: Sanfte Mitteltöne für Rahmen, Trennlinien und Hover-Effekte.
  • 500–600: Die Basis-Markenfarbe (500) und Hover-Zustand (600) für primäre Buttons.
  • 700–900: Tiefe Schattierungen für Fließtext, Überschriften und kontrastreiche Dark-Mode-Flächen.
  • 950: Fast schwarzer Farbton (~5% bis 10% Helligkeit) für dunkle Container im Dark Mode.
Wie bindet man eigene Farbabstufungen in Tailwind CSS v3 vs. v4 ein?expand_more
In Tailwind CSS v3 (JavaScript-Konfiguration): In der tailwind.config.js unter theme.extend.colors: 
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#F0F9FF',
          500: '#0EA5E9',
          900: '#0C4A6E',
        }
      }
    }
  }
}
In Tailwind CSS v4 (Reines CSS): Direkt im Stylesheet mit der @theme Direktive: 
@theme {
  --color-brand-50: #F0F9FF;
  --color-brand-500: #0EA5E9;
  --color-brand-900: #0C4A6E;
}
Warum lassen lineare Weiß- oder Schwarzmischungen Farben matt wirken?expand_more
Lineares Aufhellen oder Abdunkeln senkt die Farbsättigung drastisch, wodurch Farben kalkig oder schmutzig wirken. Professionelle Tailwind-Paletten nutzen Farbtonverschiebung (Hue Shifting): Beim Aufhellen wandert der Farbton subtil in wärmere Lichtspektren, beim Abdunkeln in kühlere Schattenspektren.
Welche Farbstufe empfiehlt sich für Überschriften, Fließtext und Rahmen?expand_more
Typische Designsystem-Empfehlungen:
  • Überschriften (H1–H3): text-slate-900 oder text-neutral-900 für maximalen Kontrast.
  • Fließtext: text-slate-700 oder text-neutral-600 für augenschonendes Lesen.
  • Untertitel & Metadaten: text-slate-500.
  • Karten- und Input-Rahmen: border-slate-200 (Light Mode) und border-slate-800 (Dark Mode).