Tailwind CSS-Farbpalettenreferenz

• Vollständige Tailwind-Farbreferenz: Durchsuchen Sie alle 22 Tailwind-CSS-Farbfamilien mit 242 einzelnen Farbfeldern. Jede Familie zeigt ihr gesamtes Spektrum von Farbton 50 (am hellsten) bis 950 (am dunkelsten), sodass Sie den perfekten Farbton für Ihr Design leicht vergleichen und auswählen können.
• Sofortige Suche und Filter: Suchen Sie nach dem Namen der Farbfamilie oder dem HEX-Wert oder filtern Sie nach Kategorie (Grau-Neutraltöne, Warm, Grün, Blau, Lila). Die Referenz wird während der Eingabe sofort aktualisiert und zeigt nur passende Familien mit ihren vollständigen Farbbereichen an.
• 100 % privat – kein Upload: Alle Farbdaten sind in die Seite integriert und werden lokal in Ihrem Browser verarbeitet. Es werden niemals Daten an einen Server gesendet – sicher für Kundenprojekte und proprietäre Designsysteme.
• Kostenlos und immer verfügbar: Greifen Sie jederzeit auf die vollständige CSS-Farbpalettenreferenz von Tailwind zu, ohne Anmeldung, ohne Abonnement und ohne Nutzungsbeschränkungen. Für immer völlig kostenlos, ohne Werbung, die die Benutzeroberfläche blockiert.

• Tailwind CSS-Entwicklung: Tailwind-Entwickler verwenden die Farbpalettenreferenz, um schnell den genauen Farbton-HEX-Wert für ihre Utility-Klassen zu finden. Anstatt sich Hex-Codes wie #3b82f6 für Blau-500 zu merken, durchsuchen Sie die visuelle Palette und kopieren Sie den Wert mit einem Klick.
• Übergabe von Design an Entwicklung: Designer verwenden die Tailwind-Farbreferenz, um ihre Figma- oder Sketch-Designs an den nächstgelegenen Tailwind-Farbton anzupassen. Anhand der visuellen Palette lässt sich leicht erkennen, welcher Farbton für eine konsistente Umsetzung zwischen Design und Code verwendet werden sollte.
• Benutzerdefinierte Designkonfiguration: Bei der Erweiterung des Standard-Tailwind-Designs verwenden Entwickler die Farbreferenz, um benutzerdefinierte Farben auszuwählen, die mit vorhandenen Tailwind-Farbtönen harmonieren. Durchsuchen Sie verwandte Familien, um Farben zu finden, die natürlich zu Ihrer erweiterten Palette passen.
• Design-System-Dokumentation: Design-System-Ingenieure verwenden die Farbreferenz als schnelle Suche für die Dokumentation von Tailwind-basierten Design-Tokens. Die organisierte Familienansicht erleichtert Ihrem Team das Nachschlagen und Dokumentieren von Farbskalen.
• Barrierefreiheits- und Kontrastprüfung: Barrierefreiheitsspezialisten verwenden die Tailwind-Farbreferenz, um Farbkombinationen zu identifizieren, die den WCAG-Kontrastanforderungen entsprechen. Dank der umfassenden Farbpalette lassen sich leicht hellere oder dunklere Varianten finden, die ausreichend Kontrast bieten.
• Lernen und Farberkundung: Designstudenten und neue Tailwind-Benutzer verwenden die Farbreferenz, um das Tailwind-Farbsystem zu verstehen. Entdecken Sie, wie jede Familie von hell nach dunkel skaliert, und erfahren Sie, welche Familien für verschiedene UI-Elemente am besten geeignet sind.

Die Tailwind CSS-Farbpalette ist ein sorgfältig zusammengestellter Satz von Farbfamilien, die für die moderne Webentwicklung entwickelt wurden. Es umfasst 22 Farbfamilien mit jeweils 11 Farbtönen von 50 (am hellsten) bis 950 (am dunkelsten) – insgesamt 242 Farben. Die Palette deckt das gesamte Spektrum ab, von kühlen Grautönen und leuchtenden Primärfarben bis hin zu dezenten Pastelltönen und tiefen Dunkeltönen, die alle harmonisch zusammenpassen.

1. Nach Familie durchsuchen: Jede der 22 Familien (Schiefer, Grau, Rot, Blau usw.) wird als Karte mit ihrem gesamten Farbbereich von 50 bis 950 angezeigt. In der Beschreibung werden der Charakter und die besten Anwendungsfälle für jede Farbfamilie erläutert.
2. Suchen oder filtern: Verwenden Sie die Suchleiste, um Familien nach Namen oder HEX-Wert zu finden. Verwenden Sie die Kategoriefilter (Grauneutral, Warm, Grün, Blau, Lila), um verwandte Farbfamilien einzugrenzen. Alle Filter werden sofort aktualisiert.
3. Kopieren Sie eine beliebige Farbe: Bewegen Sie den Mauszeiger über ein beliebiges Farbfeld und klicken Sie, um dessen HEX-Wert in Ihre Zwischenablage zu kopieren. Sie können auch die Schaltfläche „HEX kopieren“ unter jeder Farbspalte verwenden. Beim Kopieren einer Farbe wird ein optischer Bestätigungstoast angezeigt.

• Familiennamen: Farben werden in Familien wie Blau, Rot, Grau und Smaragd eingeteilt. Jede Familie repräsentiert einen bestimmten Farbton mit gleichmäßiger Sättigung aller Farbtöne.
• Farbnummern: Jede Familie enthält 11 Farbtöne mit den Nummern 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 und 950. Der Farbton 500 ist typischerweise die „Grundfarbe“, wobei niedrigere Zahlen hellere Varianten (Tönungen) und höhere Zahlen dunklere Varianten (Farbtöne) darstellen.
• Syntax der Utility-Klasse: In Tailwind CSS werden Farben als Utility-Klassen wie bg-blue-500, text-gray-900 oder border-emerald-300 verwendet. Die Farbnummer entspricht direkt dem Klassensuffix.
• Anpassung: Tailwind ermöglicht das Erweitern oder Überschreiben dieser Standardfarben in Ihrer tailwind.config.js, sodass Sie die gleiche Namenskonvention für Ihre Markenfarben beibehalten können.

Die Schattierungen 50–200 eignen sich am besten für Hintergrundfarben, subtile Hover-Zustände und leichte Füllungen von UI-Elementen. Sie bieten genug Farbe, um auffällig zu sein, ohne den Inhalt zu überfordern. Verwenden Sie diese für Kartenhintergründe, Tabellenzeilenstreifen und Navigations-Hover-Effekte.

Die Farbtöne 300–500 sind ideal für Primärfarben, Schaltflächen, Links und mittelschwere UI-Elemente. Der Farbton 500 ist die Standardeinstellung für die meisten Tailwind-Farbprogramme und bietet die beste Balance aus Sichtbarkeit und Vielseitigkeit.

Die Farbtöne 600–950 eignen sich gut für Text, Rahmen und kontrastreiche Elemente. Verwenden Sie dunklere Farbtöne für lesbaren Textkörper (normalerweise Grau-700 bis Grau-900) und für Akzentelemente, die sich von helleren Hintergründen abheben müssen. Der Farbton 950 wurde in Tailwind v3.3 für noch dunklere Optionen hinzugefügt.