# Tailwind-Farbpaletten-Sync Gib HEX ein, wähle Namensschema (Skala 50–950 / Einzelname / Verschachtelung) und generiere das theme.extend.colors-Fragment für tailwind.config.ts mit WCAG AA/AAA-Leveln. Dark Mode optional. > Kanonische Seite: https://elysiatools.com/de/tools/tailwind-color-palette-sync - **Kategorie:** Development - **Schlagwörter:** tailwind, tailwind config, palette, tokens, wcag, kontrast, dark mode ## Überblick Wandelt eine HEX-Liste in einen `theme.extend.colors`-Block — mit WCAG-Prüfung. **Eingabe.** Ein HEX pro Zeile. Optionaler Präfix: `brand: #3b82f6`. Ohne Namen → `color1`. **Schemata.** Skala (50–950, 11 Stufen), Einzelname oder Verschachtelung. Die Skala interpoliert in HSL zu Weiß/Schwarz. **WCAG.** Jede Nuance wird AAA (≥7), AA (≥4.5), AA-Large (≥3) oder Fail zugeordnet. **Dark Mode.** Optional, zweite HEX-Liste → separate Konfiguration. **Mathe.** HSL-Helligkeitsinterpolation; Eingabe ankert Stufe 500. ## Eingaben - **Farben (ein HEX pro Zeile, oder "name: HEX")** (textarea): brand: #3b82f6 accent: #10b981 #f59e0b - **Namensschema** (select) - **Dark-Mode-Farben einbeziehen** (checkbox) - **Dark-Mode-Farben (optional, gleiches Format)** (textarea): brand: #60a5fa accent: #34d399 ## Wann verwenden - Wenn Sie eine Markenfarbe in eine vollständige 11-stufige Tailwind-Farbskala (50–950) für UI-Komponenten aufteilen müssen. - Wenn Sie die Barrierefreiheit (WCAG-Kontrastwerte) Ihrer Farbpalette direkt bei der Konfiguration überprüfen möchten. - Wenn Sie konsistente Farb-Tokens für den Light- und Dark-Mode in Ihrer Tailwind-Konfigurationsdatei synchronisieren wollen. ## Funktionsweise - Geben Sie Ihre HEX-Farbcodes zeilenweise ein, optional mit einem Namen versehen wie 'brand: #3b82f6'. - Wählen Sie das gewünschte Namensschema aus: Skala (50–950), Einzelname oder verschachtelte Objekte. - Aktivieren Sie optional den Dark Mode und fügen Sie die entsprechenden dunklen Farbwerte hinzu. - Kopieren Sie den generierten HTML-Codeblock direkt in den theme.extend.colors-Bereich Ihrer tailwind.config.ts. ## Anwendungsfälle - Erstellung barrierefreier UI-Komponenten durch direkte Einsicht der WCAG-Kontraststufen für jeden Farbton. - Schnelle Migration von Figma-Markenfarben in eine strukturierte Tailwind-Konfigurationsdatei. - Synchronisation von Light- und Dark-Mode-Farbpaletten für konsistente Design-Systeme. ## Häufig gestellte Fragen ### Wie berechnet das Tool die Farbstufen von 50 bis 950? Es nutzt HSL-Helligkeitsinterpolation, wobei die eingegebene Farbe als Stufe 500 verankert wird und zu Weiß bzw. Schwarz verläuft. ### Was bedeuten die WCAG-Labels wie AA oder AAA? Sie zeigen an, ob der Kontrast der jeweiligen Farbe auf weißem oder schwarzem Hintergrund die Barrierefreiheitsstandards erfüllt. ### Kann ich Farben ohne Namen eingeben? Ja, unbenannte HEX-Werte werden automatisch als 'color1', 'color2' usw. benannt. ### Wie funktioniert die Dark-Mode-Option? Sie können eine zweite Liste von HEX-Werten eingeben, um eine separate Konfiguration für das dunkle Farbschema zu generieren. ### Welche Namensschemata werden unterstützt? Sie können zwischen einer flachen Skala (50–950), Einzelwerten (Single) oder verschachtelten Objekten (Nested) wählen. ## Ähnliche Tools - [KI-Domain-Namen-Generator](https://elysiatools.com/de/tools/ai-domain-name-idea-generator): Gib Marken-Schlüsselwörter ein — die KI erzeugt bis zu 10 Domain-Ideen und filtert bereits vergebene per DNS + RDAP heraus. Für Gründer und Entwickler. - [package.json Abhängigkeits-Prüfer](https://elysiatools.com/de/tools/package-json-dependency-auditor): Prüft ein package.json auf Abhängigkeitshygiene und Qualität von Versionsbereichen und kann optional den transitiven Baum aus package-lock.json oder yarn.lock untersuchen. Markiert Duplikate, Wildcards oder Pre-Releases, unsortierte Schlüssel, fehlende Metadaten und falsch klassifizierte Laufzeit-/Dev-Abhängigkeiten. - [Farbraumkonverter](https://elysiatools.com/de/tools/color-space-converter): Konvertiert Farben zwischen HEX, RGB, HSL, CIELAB und Display-P3 mit CSS-Ausgabe und Gamut-Pruefung. - [JWK-Generator & Parser](https://elysiatools.com/de/tools/jwk-generator): Generiert JSON Web Keys (JWK) für RSA, EC (P-256/P-384/P-521/secp256k1) und OKP (Ed25519/Ed448/X25519/X448) oder parst einen bestehenden JWK zur Inspektion von Parametern, Fingerabdruck und Metadaten - [Kanban Cycle-Time- & Durchsatz-Coach](https://elysiatools.com/de/tools/kanban-cycle-time-throughput-coach): Importieren Sie Erstellt→Gestartet→Erledigt-Zeitstempel aus CSV (Jira-artig oder einfach) und erhalten Sie Flow-Metriken wie Agile-Coaches sie lesen: Lead-/Cycle-Time-Perzentile, WIP-Alter, Durchsatz pro Tag/Woche/Monat, ein kumulatives Flussdiagramm und eine Little's-Law-Konsistenzprüfung. - [PKCE Code Verifier & Challenge Generator](https://elysiatools.com/de/tools/pkce-code-verifier-generator): Erzeugt, validiert und verifiziert OAuth2-/OIDC-PKCE (RFC 7636) Code-Verifier-/Challenge-Paare. Drei Modi: (1) ein frisches Paar aus kryptografisch sicheren Zufallsbytes (256/384/512/768 Bit) erzeugen, (2) einen eigenen Verifier gegen den RFC prüfen — Länge (43–128), Zeichensatz \[A-Za-z0-9-._~\] und ≥256 Bit Entropie, und (3) ein Paar verifizieren durch Neuberechnung von BASE64URL(SHA256(verifier)). Optional werden die vollständige Autorisierungs-URL und der Token-Austausch-Body gebaut. Ergänzt den generischen Nonce-Generator (der nur das Paar ausgibt) um RFC-Konformitäts-Audit und Paar-Verifikation. - [Security-Header-Prüfer](https://elysiatools.com/de/tools/security-headers-checker): Prüft HTTP-Antwort-Header auf Sicherheits-Compliance — analysiert die von Ihnen eingefügten Roh-Header (ohne Netzwerk) und bewertet sie gegen das OWASP-Secure-Header-Set mit Wertebenen-Prüfungen: HSTS max-age, CSP unsafe-inline/eval, X-Content-Type-Options, Referrer-Policy, Permissions-Policy, COOP/COEP/CORP u. a. Liefert eine Note (A+ bis F) sowie pro-Header-Befunde mit kopierfertigen Empfehlungen. - [Achsen- und Instanz-Baukasten für Variable Fonts und CSS font-variation-settings](https://elysiatools.com/de/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): Lade eine Variable Font (TTF/OTF/WOFF/WOFF2) hoch, um ihre fvar-Achsen und benannten Instanzen zu prüfen, die Interpolation live im Browser voranzusehen und ein kopierfertiges font-variation-settings-CSS samt hochwertiger Ersatzproperties und variablem @font-face-Block zu erzeugen. ## Beispiele - [Farbcode-Beispiele](https://elysiatools.com/de/samples/color-code): Sammlung von Farbcodes in verschiedenen Formaten (Hex, RGB, HSL, benannte Farben) für Validierungstests - [Tailwind CSS Beispiele](https://elysiatools.com/de/samples/tailwind-css): Tailwind CSS Beispiele - Utility-first CSS-Framework mit responsivem Design, Komponenten und benutzerdefinierten Konfigurationen - [Web Python Bildverarbeitung Beispiele](https://elysiatools.com/de/samples/web-image-processing-python): Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung - [Android Java Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-java): Android Java Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung