Tailwind CSS Farbton-Generator

Tailwind CSS Farbton-Generator

Fügen Sie eine einzelne Hex-Farbe ein und erhalten Sie sofort eine vollständige, Tailwind-stilvolle Palette von 50 bis 950 mit perzeptuell gleichmäßigen Schritten. Die Skala wird im OKLCH-Farbraum erstellt, sodass jeder Stop für das Auge ein gleichmäßiger Helligkeitsanstieg darstellt – nicht nur ein lineares Abfall in RGB oder HSL.

Fügen Sie das Ergebnis direkt in Ihre tailwind.config.js, geben Sie es als CSS-Standardwerte oder SCSS-Variable ein oder exportieren Sie es als JSON für Ihr Design-Token-Pipeline.

Nutzung

1. Wählen Sie eine Basisfarbe mit dem Farbpicker oder fügen Sie ein Hex-Wert wie #464aff.
2. Geben Sie der Palette einen Namen (z. B. primary, brand, oder accent) — dieser wird als Objektschlüssel im exportierten Code verwendet.
3. Auswählen Tailwind v4 (OKLCH) für moderne oklch() CSS, oder Tailwind v3 (hex) für klassische hex-Ausgabe.
4. Schalten Sie den 950-Stop ein oder aus und verschieben Sie den Chroma-Slider auf oder ab, um die Sättigung zu erhöhen oder zu verringern.
5. Wählen Sie einen Exportformat – Tailwind-Konfiguration, CSS-Standardwerte, SCSS-Variable oder JSON – und kopieren oder herunterladen Sie den generierten Code.
6. Klicken Sie auf eine beliebige Farbe in der Vorschau, um deren Hex-Wert in die Zwischenablage zu kopieren.

Funktionen

• Perzeptuelle OKLCH-Mathematik – Interpoliert Helligkeit und Chroma im OKLCH-Farbraum, sodass jeder Stop im Bereich von 50 bis 950 für das Auge ein gleichmäßiger Schritt erscheint.
• Vollständige Skala von 50 bis 950 – Erzeugt die vollständige 11-Stop-Tailwind-Palette mit der Option, den zusätzlichen dunklen 950-Stop zu entfernen, wenn nur die klassische 10 benötigt wird.
• Live-Vorschau der Farben – Sehen Sie alle Farben auf einen Blick, klicken Sie auf eine Farbe, um deren Hex-Wert in die Zwischenablage zu kopieren, und justieren Sie die Skala sofort, während Sie tippen.
• WCAG-Kontrastprüfer – Jeder Stop wird gegen Weiß- und Schwarzgrundlagen mit AA- und AAA-Prüfungen bewertet und entsprechende Abzeichen angezeigt.
• Mehrere Exportziele – Ausgabe als tailwind.config.js, :root CSS-Variable, SCSS-Variable oder einfache JSON-Design-Token.
• Chroma-Steuerung – Ein einziger Slider skalieren die Sättigung aller Stops, sodass Sie die Palette heller machen oder abdunkeln können, ohne die Farbe zu verändern.
• Gamut-sicher – Die Chroma wird automatisch bei jeder Helligkeitsstufe begrenzt, sodass die generierten Hex-Werte immer innerhalb des sRGB-Raums gerendert werden.