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
- Image Color Palette Extractor — Find the color palette of any image — a photo, logo, screenshot or design.
- Color Mixer — Pick two colors and a number of steps to get evenly blended transition colors — perfect for gradients, borders, charts and hover states.
- CSS Variables to Tailwind — Turn your :root color variables into a Tailwind theme in one paste — Tailwind v3 tailwind.config.js or v4 @theme, with literal values or var() references.
- OKLCH Color Converter — Explore the perceptually uniform OKLCH color space with live sliders, see whether a color fits in sRGB, and copy matching HEX, RGB and HSL fallbacks.