Erstellen Sie vollständige 50-950 Farbabstufungen für Ihr Tailwind CSS-Projekt.
Das Utility-First-CSS-Framework Tailwind CSS strukturiert Farbpaletten in elf abgestufte Helligkeitsstufen von 50 (sehr hell) über 500 (Basiston) bis 950 (sehr dunkel). Dieser interaktive Farbpaletten-Generator berechnet aus einer einzigen beliebigen Primärfarbe eine harmonische, wahrnehmungsgetreue 11-Stufen-Farbmatrix im OKLCH- oder HSL-Farbraum und exportiert den fertigen Konfigurationscode direkt für die tailwind.config.js.
Ein Frontend-Entwickler erstellt das Corporate-Design-System für ein neues SaaS-Startup mit der Marken-Basisfarbe Smaragdgrün (#0D9488). Er gibt den Hex-Code in den Generator ein, der in unter 15 Millisekunden alle Schattierungen von 50 (#F0FDFA) bis 950 (#042F2E) berechnet und die Kontraststufen für Barrierefreiheit (WCAG) visualisiert. Der Entwickler klickt auf Tailwind-Config kopieren und erhält das fertige JavaScript-Objekt primary: { 50: '#f0fdfa', ..., 950: '#042f2e' }, das nahtlos in das Theme-Objekt eingefügt werden kann.
Alle mathematischen Farbraumberechnungen und Palettengenerierungen erfolgen zu 100 % lokal im Arbeitsspeicher Ihres Webbrowsers. Es werden keine Markenfarben, Farbwerte oder Projekt-Konfigurationen an externe Server übermittelt, was Ihnen vollkommene Vertraulichkeit bei Ihren Design-Systemen zusichert.
Shade_i = LCH_Interpolation(Basis_Farbe, Helligkeits_Stufen[50..950]) ; Kontrast_Ratio = WCAG(Shade_i, Hintergrund)
Interpoliert Helligkeit und Farbsättigung entlang wahrnehmungsgerechter Farbräume (OKLCH/LAB) und generiert konsistente Tailwind-Farbtoken.