# Generatore di temi WordPress IA gratuito per block theme URL: https://noonwp.com/it/tools/generatore-temi-wordpress-ia Type: tool Locale: it Published: 2026-10-21 Updated: 2026-10-25 --- > Genera da un solo colore brand una tavolozza controllata sul contrasto, una scala tipografica modulare e un theme.json pronto per il tuo block theme. Gratis, funziona nel browser. ## Generatore di temi WordPress IA: palette theme.json e scala tipografica in pochi secondi Un generatore di temi IA per WordPress di solito promette un intero sito. Questo fa la parte che puoi verificare: una tavolozza controllata sul contrasto, una scala tipografica modulare e un theme.json pronto per il tuo block theme. ## Generatore di starter per block theme Scegli un colore brand, una base e un abbinamento di font. Tavolozza, report sul contrasto e theme.json si aggiornano a ogni modifica. *[Interactive widget — see the live page for the full experience]* ## Cosa calcola davvero il generatore ### Una tavolozza da un solo colore Il tuo colore brand diventa Primario. Lo strumento ne legge la tonalità e costruisce Base, Superficie e Contrasto in HSL, con luminosità del 97, 93 e 11 per cento su una base chiara, oppure 9, 14 e 92 su una scura. Accento si trova a 150 gradi sulla ruota dei colori. ### Contrasto che puoi controllare Quattro coppie vengono misurate con la formula di luminanza WCAG 2.x: testo su base, link, testo del pulsante e accento. Ognuna riceve un rapporto e un voto. Se il link non supera AA, la sua luminosità si sposta un passo alla volta finché non lo supera. ### Una scala tipografica modulare Medio vale 1rem. Grande, extra grande ed enorme moltiplicano per il tuo rapporto una, due e tre volte, mentre piccolo lo divide. Con il rapporto 1.2 ottieni 0.833, 1, 1.2, 1.44 e 1.728 rem. *A margine* ## Perché i design token vengono prima dei pattern Un pattern hero, una griglia di card e un footer leggono tutti le stesse etichette di colore. Se quelle etichette contengono valori che non superano il contrasto, ogni pattern eredita il problema e lo scopri sul telefono del cliente. Sistemare prima i token significa che i pattern che costruisci, o generi con Pattern Forge, partono da colori già conformi. Prova il risultato con un sito reale del cliente, non con un ambiente di prova. - Gli slug dei colori sono condivisi da ogni blocco e pattern - Gli slug delle dimensioni mantengono coerenti i titoli in tutti i template - Una sola modifica a theme.json aggiorna l'intero sito ## Dal file generato al tema online 1. **Scegli gli input** — Parti dal colore brand del logo del cliente. Scegli una base chiara, a meno che il brand non sia scuro per natura, poi l'abbinamento di font che si adatta al tono. 2. **Leggi il report sul contrasto** — Cerca le righe marcate Non superato o Solo testo grande. Cambia la base o la tinta neutra finché testo, link e testo dei pulsanti superano tutti AA. 3. **Copia il file nel tuo tema** — Premi Copia theme.json, incollalo nella radice del tuo block theme, poi apri il Site Editor e verifica che la tavolozza compaia nel selettore colori. 4. **Rifinisci a mano** — L'output è un punto di partenza. Rinomina gli slug per adattarli al tuo design system, aggiungi impostazioni di spaziatura e layout e salva il file insieme al resto del tema. ## Cosa non fa questo strumento ### Nessun layout di pagina Produce token, non template. Header, footer e struttura delle pagine arrivano ancora dal tuo block theme o dai pattern che costruisci nel Site Editor. ### Nessun web font Entrambi gli abbinamenti usano stack di sistema per evitare richieste di font. I caratteri di marca richiedono un variable font self-hosted e una voce fontFace, che aggiungi tu. ### Nessuna garanzia di gusto Una tavolozza può superare ogni controllo di contrasto e avere un aspetto piatto. Consideralo una base sicura, poi regola Accento e i neutri a occhio su una pagina reale. ## Domande sul generatore ### È davvero un generatore di temi IA? No, e lo dice subito. Tavolozza, controlli del contrasto e scala tipografica derivano da regole fisse: matematica dei colori in HSL, formula del contrasto WCAG e una scala modulare. Così l'output è prevedibile e testabile. Se vuoi un modello linguistico nel processo, Pattern Forge genera pattern Gutenberg a partire da un prompt; questo strumento copre i design token che stanno sotto di essi. ### È gratuito e salva i miei colori? È gratuito e non richiede un account. Tutto gira nel tuo browser. L'unica cosa inviata è un contatore anonimo che registra l'uso dello strumento, senza valori di colore ne testo del modulo. ### Da dove viene il rapporto di contrasto? Dalla formula di luminanza relativa WCAG 2.x: ogni canale sRGB viene linearizzato, pesato con 0.2126, 0.7152 e 0.0722, e il rapporto è (più chiaro + 0.05) diviso (più scuro + 0.05). 4.5 a 1 è la soglia AA per il testo normale, 7 a 1 è AAA e 3 a 1 è la soglia AA per il testo grande. ### Perché il colore del link e diverso dal mio colore brand? Un colore brand spesso non supera 4.5 a 1 su una base quasi bianca o quasi nera. Lo strumento mantiene il tuo colore brand come Primario, per pulsanti e riempimenti, e sposta la sua luminosità di un passo alla volta finché la variante Link non supera AA sulla base scelta. ### Quale versione di WordPress supporta l'output? Il file usa theme.json versione 3, introdotta con WordPress 6.6 (luglio 2024). Le installazioni più vecchie potrebbero richiedere la versione 2, che ha la stessa struttura di tavolozza e tipografia, quindi puoi cambiare il numero e mantenere il resto. ### Le font stack caricano qualcosa dal web? No. Entrambi gli abbinamenti usano stack di sistema in stile Georgia, quindi non c'è nessuna richiesta di font e nessuno spostamento del layout causato da un web font in ritardo. Se in seguito ospiti un variable font, sostituisci i valori fontFamily e mantieni gli slug. ### Funziona per i siti da destra a sinistra? L'output non contiene valori left o right: colori, dimensioni e famiglie dei font sono indipendenti dalla direzione. Verifica separatamente il fallback dei font per arabo o ebraico, perché gli stack di sistema cambiano da piattaforma a piattaforma. ### Dove va il file nel mio tema? Salvalo come theme.json nella radice di un block theme e apri il Site Editor. Le voci della tavolozza compaiono nel selettore colori, le dimensioni nel pannello tipografia e la sezione stili imposta i valori predefiniti per tutto il sito. ## Passa i token a un pattern, non a una pagina bianca Quando il theme.json è pronto, Pattern Forge prepara pattern Gutenberg che usano la tua tavolozza e la tua scala tipografica. Monk e gratuito; Scribe costa $12/mese. *Call to action: Illumina il tuo sito* ## FAQ ### È davvero un generatore di temi IA? No, e lo dice subito. Tavolozza, controlli del contrasto e scala tipografica derivano da regole fisse: matematica dei colori in HSL, formula del contrasto WCAG e una scala modulare. Così l'output è prevedibile e testabile. Se vuoi un modello linguistico nel processo, Pattern Forge genera pattern Gutenberg a partire da un prompt; questo strumento copre i design token che stanno sotto di essi. ### È gratuito e salva i miei colori? È gratuito e non richiede un account. Tutto gira nel tuo browser. L'unica cosa inviata è un contatore anonimo che registra l'uso dello strumento, senza valori di colore ne testo del modulo. ### Da dove viene il rapporto di contrasto? Dalla formula di luminanza relativa WCAG 2.x: ogni canale sRGB viene linearizzato, pesato con 0.2126, 0.7152 e 0.0722, e il rapporto è (più chiaro + 0.05) diviso (più scuro + 0.05). 4.5 a 1 è la soglia AA per il testo normale, 7 a 1 è AAA e 3 a 1 è la soglia AA per il testo grande. ### Perché il colore del link e diverso dal mio colore brand? Un colore brand spesso non supera 4.5 a 1 su una base quasi bianca o quasi nera. Lo strumento mantiene il tuo colore brand come Primario, per pulsanti e riempimenti, e sposta la sua luminosità di un passo alla volta finché la variante Link non supera AA sulla base scelta. ### Quale versione di WordPress supporta l'output? Il file usa theme.json versione 3, introdotta con WordPress 6.6 (luglio 2024). Le installazioni più vecchie potrebbero richiedere la versione 2, che ha la stessa struttura di tavolozza e tipografia, quindi puoi cambiare il numero e mantenere il resto. ### Le font stack caricano qualcosa dal web? No. Entrambi gli abbinamenti usano stack di sistema in stile Georgia, quindi non c'è nessuna richiesta di font e nessuno spostamento del layout causato da un web font in ritardo. Se in seguito ospiti un variable font, sostituisci i valori fontFamily e mantieni gli slug. ### Funziona per i siti da destra a sinistra? L'output non contiene valori left o right: colori, dimensioni e famiglie dei font sono indipendenti dalla direzione. Verifica separatamente il fallback dei font per arabo o ebraico, perché gli stack di sistema cambiano da piattaforma a piattaforma. ### Dove va il file nel mio tema? Salvalo come theme.json nella radice di un block theme e apri il Site Editor. Le voci della tavolozza compaiono nel selettore colori, le dimensioni nel pannello tipografia e la sezione stili imposta i valori predefiniti per tutto il sito.