# Kostenloser KI WordPress Theme Generator für Block-Themes URL: https://noonwp.com/de/tools/ki-wordpress-theme-generator Type: tool Locale: de Published: 2026-10-21 Updated: 2026-10-25 --- > Erzeugen Sie aus einer Markenfarbe eine kontrastgeprüfte Palette, eine modulare Typo-Skala und eine fertige theme.json für Ihr WordPress-Block-Theme. Kostenlos, läuft im Browser. ## Eine theme.json-Palette und Typo-Skala in Sekunden erzeugen Ein KI WordPress Theme Generator verspricht meist eine ganze Website. Dieser hier liefert den Teil, den Sie prüfen können: eine kontrastgeprüfte Palette, eine modulare Typo-Skala und eine fertige theme.json für Ihr Block-Theme. ## Block-Theme-Starter-Generator Wählen Sie eine Markenfarbe, eine Grundlage und eine Schriftkombination. Palette, Kontrastbericht und theme.json aktualisieren sich bei jeder Änderung. *[Interactive widget — see the live page for the full experience]* ## Was der Generator tatsächlich berechnet ### Eine Palette aus einer Farbe Ihre Markenfarbe wird zur Primärfarbe. Das Tool liest ihren Farbton und baut daraus in HSL Basis, Fläche und Kontrast auf, bei hellem Grund mit 97, 93 und 11 Prozent Helligkeit, bei dunklem mit 9, 14 und 92 Prozent. Die Akzentfarbe liegt 150 Grad im Farbkreis daneben. ### Kontrast, den Sie prüfen können Vier Paare werden mit der Luminanzformel nach WCAG 2.x gemessen: Fließtext, Link, Button-Text und Akzent. Jedes erhält ein Verhältnis und eine Note. Besteht der Link AA nicht, wandert seine Helligkeit Schritt für Schritt, bis er besteht. ### Eine modulare Typo-Skala Mittel ist 1rem. Groß, Extra groß und Riesig multiplizieren mit Ihrem Verhältnis einmal, zweimal und dreimal, Klein teilt durch das Verhältnis. Mit dem Verhältnis 1.2 ergeben sich 0.833, 1, 1.2, 1.44 und 1.728 rem. *Randnotiz* ## Warum Design-Tokens vor den Patterns kommen Ein Hero-Pattern, ein Kartenraster und ein Footer lesen alle dieselben Palette-Slugs. Enthalten diese Slugs Werte, die den Kontrast nicht erfüllen, erbt jedes Pattern den Fehler, und Sie bemerken ihn auf dem Telefon des Kunden. Erst die Tokens zu korrigieren bedeutet, dass die Patterns, die Sie bauen oder mit Pattern Forge generieren, schon von Farben ausgehen, die bestehen. Testen Sie das Ergebnis mit einer echten Kundenseite, nicht in einer Sandbox. - Palette-Slugs werden von jedem Block und jedem Pattern geteilt - Schriftgrößen-Slugs halten Überschriften über alle Templates hinweg konsistent - Eine Änderung an theme.json aktualisiert die ganze Website ## Von der generierten Datei zum fertigen Theme 1. **Eingaben wählen** — Beginnen Sie mit der Markenfarbe aus dem Logo des Kunden. Wählen Sie eine helle Basis, außer die Marke ist von Natur aus dunkel, und dann die Schriftkombination, die zum Ton passt. 2. **Den Kontrastbericht lesen** — Achten Sie auf Zeilen mit Nicht bestanden oder Nur großer Text. Ändern Sie Basis oder neutrale Tönung, bis Fließtext, Link und Button-Text alle AA bestehen. 3. **Die Datei in Ihr Theme kopieren** — Klicken Sie auf theme.json kopieren, fügen Sie die Datei im Stammverzeichnis Ihres Block-Themes ein und öffnen Sie dann den Site Editor. Prüfen Sie, ob die Palette im Farbwähler erscheint. 4. **Von Hand verfeinern** — Das Ergebnis ist ein Ausgangspunkt. Benennen Sie Slugs so um, dass sie zu Ihrem Designsystem passen, ergänzen Sie Abstände und Layout-Einstellungen und committen Sie die Datei zusammen mit dem übrigen Theme. ## Was dieses Tool nicht leistet ### Keine Seitenlayouts Es erzeugt Tokens, keine Templates. Header, Footer und Seitenstruktur kommen weiterhin aus Ihrem Block-Theme oder aus Patterns, die Sie im Site Editor bauen. ### Keine Webfonts Beide Kombinationen nutzen Systemschriften, um jede Schriftanfrage zu vermeiden. Markenschriften brauchen eine selbst gehostete Variable Font und einen fontFace-Eintrag, den Sie selbst ergänzen. ### Keine Garantie für den Geschmack Eine Palette kann jede Kontrastprüfung bestehen und trotzdem flach wirken. Behandeln Sie das Ergebnis als sichere Grundlage und passen Sie Akzent und Neutraltöne auf einer echten Seite nach Augenmaß an. ## Fragen zum Generator ### Ist das wirklich ein KI-Theme-Generator? Nein, und das sagt das Tool gleich vorweg. Palette, Kontrastprüfungen und Typo-Skala entstehen aus festen Regeln: Farbrechnung in HSL, die WCAG-Kontrastformel und eine modulare Skala. Das macht das Ergebnis vorhersagbar und testbar. Wenn Sie ein Sprachmodell im Spiel haben wollen, erzeugt Pattern Forge Gutenberg-Patterns aus einem Prompt. Dieses Tool liefert die Design-Tokens, die darunter liegen. ### Ist es kostenlos, und werden meine Farben gespeichert? Es ist kostenlos und benötigt kein Konto. Alles läuft in Ihrem Browser. Gesendet wird nur ein anonymer Zähler, der festhält, dass das Tool benutzt wurde, ohne Farbwerte oder Texte aus dem Formular. ### Woher stammt das Kontrastverhältnis? Aus der Luminanzformel nach WCAG 2.x: Jeder sRGB-Kanal wird linearisiert, mit 0.2126, 0.7152 und 0.0722 gewichtet, und das Verhältnis ist (Heller + 0.05) geteilt durch (Dunkler + 0.05). 4.5 zu 1 ist die AA-Schwelle für Fließtext, 7 zu 1 die AAA-Schwelle und 3 zu 1 die AA-Schwelle für großen Text. ### Warum weicht die Linkfarbe von meiner Markenfarbe ab? Eine Markenfarbe scheitert oft an 4.5 zu 1 gegen eine fast weiße oder fast schwarze Basis. Der Generator behält Ihre Markenfarbe als Primärfarbe für Buttons und Flächen und verschiebt ihre Helligkeit Schritt für Schritt, bis die Linkvariante auf der gewählten Basis AA besteht. ### Auf welche WordPress-Version zielt die Ausgabe? Die Datei nutzt theme.json in Version 3, die mit WordPress 6.6 (Juli 2024) eingeführt wurde. Ältere Installationen brauchen eventuell Version 2, die dieselbe Palette- und Typografiestruktur hat. Dann ändern Sie nur die Zahl und behalten den Rest. ### Lädt der Schriftstapel etwas aus dem Netz? Nein. Beide Kombinationen nutzen Systemschriften im Stil von Georgia, es gibt also keine Schriftanfrage und keinen Layoutsprung durch eine verspätete Webfont. Wenn Sie später eine Variable Font selbst hosten, ersetzen Sie die fontFamily-Werte und behalten die Slugs bei. ### Funktioniert es für rechtsläufige Websites? Die Ausgabe enthält keine Links- oder Rechts-Werte: Farben, Schriftgrößen und Familien sind richtungsunabhängig. Prüfen Sie Ihre Schrift-Fallbacks für Arabisch oder Hebräisch separat, denn Systemschriften unterscheiden sich je nach Plattform. ### Wohin kommt die Datei in meinem Theme? Speichern Sie sie als theme.json im Stammverzeichnis eines Block-Themes und öffnen Sie den Site Editor. Palette-Einträge erscheinen im Farbwähler, Größen im Typografie-Panel, und der Abschnitt Stile setzt die Standardwerte für die ganze Website. ## Die Tokens an ein Pattern übergeben, nicht an eine leere Seite Sobald die theme.json steht, entwirft Pattern Forge Gutenberg-Patterns, die Ihre Palette und Typo-Skala nutzen. Monk ist kostenlos, Scribe kostet $12/mo. *Call to action: Illuminate your site* ## FAQ ### Ist das wirklich ein KI-Theme-Generator? Nein, und das sagt das Tool gleich vorweg. Palette, Kontrastprüfungen und Typo-Skala entstehen aus festen Regeln: Farbrechnung in HSL, die WCAG-Kontrastformel und eine modulare Skala. Das macht das Ergebnis vorhersagbar und testbar. Wenn Sie ein Sprachmodell im Spiel haben wollen, erzeugt Pattern Forge Gutenberg-Patterns aus einem Prompt. Dieses Tool liefert die Design-Tokens, die darunter liegen. ### Ist es kostenlos, und werden meine Farben gespeichert? Es ist kostenlos und benötigt kein Konto. Alles läuft in Ihrem Browser. Gesendet wird nur ein anonymer Zähler, der festhält, dass das Tool benutzt wurde, ohne Farbwerte oder Texte aus dem Formular. ### Woher stammt das Kontrastverhältnis? Aus der Luminanzformel nach WCAG 2.x: Jeder sRGB-Kanal wird linearisiert, mit 0.2126, 0.7152 und 0.0722 gewichtet, und das Verhältnis ist (Heller + 0.05) geteilt durch (Dunkler + 0.05). 4.5 zu 1 ist die AA-Schwelle für Fließtext, 7 zu 1 die AAA-Schwelle und 3 zu 1 die AA-Schwelle für großen Text. ### Warum weicht die Linkfarbe von meiner Markenfarbe ab? Eine Markenfarbe scheitert oft an 4.5 zu 1 gegen eine fast weiße oder fast schwarze Basis. Der Generator behält Ihre Markenfarbe als Primärfarbe für Buttons und Flächen und verschiebt ihre Helligkeit Schritt für Schritt, bis die Linkvariante auf der gewählten Basis AA besteht. ### Auf welche WordPress-Version zielt die Ausgabe? Die Datei nutzt theme.json in Version 3, die mit WordPress 6.6 (Juli 2024) eingeführt wurde. Ältere Installationen brauchen eventuell Version 2, die dieselbe Palette- und Typografiestruktur hat. Dann ändern Sie nur die Zahl und behalten den Rest. ### Lädt der Schriftstapel etwas aus dem Netz? Nein. Beide Kombinationen nutzen Systemschriften im Stil von Georgia, es gibt also keine Schriftanfrage und keinen Layoutsprung durch eine verspätete Webfont. Wenn Sie später eine Variable Font selbst hosten, ersetzen Sie die fontFamily-Werte und behalten die Slugs bei. ### Funktioniert es für rechtsläufige Websites? Die Ausgabe enthält keine Links- oder Rechts-Werte: Farben, Schriftgrößen und Familien sind richtungsunabhängig. Prüfen Sie Ihre Schrift-Fallbacks für Arabisch oder Hebräisch separat, denn Systemschriften unterscheiden sich je nach Plattform. ### Wohin kommt die Datei in meinem Theme? Speichern Sie sie als theme.json im Stammverzeichnis eines Block-Themes und öffnen Sie den Site Editor. Palette-Einträge erscheinen im Farbwähler, Größen im Typografie-Panel, und der Abschnitt Stile setzt die Standardwerte für die ganze Website.