So nutzt du: Tailwind-Farbgenerator
- Gib deine Markenfarbe als HEX, RGB, HSL oder OKLCH ein.
- Gib der Palette einen Namen (z. B.
brand) – sie wirdbg-brand-500und Freunde. - Behalte den „nächstgelegenen Schritt“ bei, damit deine exakte Farbe genau auf den Farbton trifft, der ihrer Helligkeit entspricht, oder setze den Wert zwangsweise auf 500.
- Wähle ein Exportformat aus und füge es in deine Tailwind-Konfiguration, dein CSS oder SCSS ein.
Was ist eine Farbskala von 50 bis 950?
Designsysteme wie Tailwind CSS beschreiben jede Farbe als eine Abstufung von Farbtönen: 50 ist ein fast weißer Farbton für Hintergründe, 500 ist die Kernfarbe und 900–950 sind tiefe Farbtöne für Text und den Dunkelmodus. Mit der gesamten Farbskala kannst du Hover- und aktive Zustände, Rahmen, Badges und dunkle Designs einheitlich gestalten – statt jedes Mal nach Augenmaß eine hellere oder dunklere Variante zu wählen.
So erstellt dieser Generator die Skala
- Deine Farbe wird in OKLCH umgewandelt, einen wahrnehmungsmäßig einheitlichen Farbraum, sodass jeder Schritt einen gleichmäßigen visuellen Sprung darstellt.
- Jeder Schritt hat eine Zielhelligkeit, die sich an der Palette von Tailwind v4 orientiert (≈97 % für 50 bis hinunter zu ≈26 % für 950). Deine Farbe wird auf den nächstgelegenen Schritt gesetzt, und benachbarte Zielwerte verschieben sich leicht, sodass die Farbskala fließend ineinander übergeht.
- Die Farbsättigung (Chroma) erreicht ihren Höchstwert bei etwa 500–600 und nimmt zu beiden Enden hin ab, ähnlich wie bei handgefertigten Paletten, sodass Töne nicht neonartig und Schattierungen nicht trüb wirken.
- Jeder Farbton außerhalb des sRGB-Farbraums wird durch Verringerung der Farbsättigung bei gleichbleibendem Farbton und gleichbleibender Helligkeit in den Farbraum abgebildet.
Verwendung der Palette
Tailwind v4 liest Farben aus dem CSS aus: Füge den @theme Block in dein Haupt-Stylesheet ein, und Klassen wie bg-brand-100 erscheinen. Tailwind v3 verwendet theme.extend.colors in tailwind.config.js. Die CSS-Variablen und SCSS-Exporte funktionieren in jedem Projekt – auch in Webflow, wo du im Variablen-Panel passende Farbvariablen erstellen kannst.
Tipps zur Barrierefreiheit
Als Faustregel gilt: Text auf weißem Hintergrund benötigt einen ausreichend dunklen Farbton, um ein Kontrastverhältnis von 4,5:1 zu erreichen (oft 600 oder dunkler), und Text auf dunklem Hintergrund funktioniert in der Regel ab 300 oder heller. Der Hinweis unter jedem Farbfeld gibt dir Aufschluss; überprüfe bestimmte Farbkombinationen mit dem Contrast Checker oder dem APCA Contrast Checker.
Auch gesucht als: tailwind-farbpalette, schattengenerator, farbgenerator, farbskala, farben des design-systems, markenpalette, 50–900.
Passende Tools zu: Tailwind-Farbgenerator
- Farbpalette aus Bild — Finde die Farbpalette jedes Bildes, ob Foto, Logo, Screenshot oder Design.
- Farbmischer — Wähle zwei Farben und die Anzahl der Schritte, um gleichmäßig gemischte Übergangsfarben zu erhalten — ideal für Verläufe, Rahmen, Diagramme und Hover-Zustände.
- CSS-Variablen zu Tailwind — Verwandle deine :root-Farbvariablen mit einem Einfügen in ein Tailwind-Theme: als Tailwind-v3-tailwind.config.js oder v4-@theme, wahlweise mit festen Werten oder var()-Referenzen.
- OKLCH Farbkonverter — Erkunde den wahrnehmungsgleichmäßigen OKLCH-Farbraum mit Live-Reglern, prüfe, ob eine Farbe in sRGB passt, und kopiere passende HEX-, RGB- und HSL-Fallbacks.