# Gratis AI WordPress Thema Generator voor Block Themes URL: https://noonwp.com/nl/tools/ai-wordpress-thema-generator Type: tool Locale: nl Published: 2026-10-21 Updated: 2026-10-25 --- > Genereer een contrastgecontroleerd palet, een modulaire typeschaal en een klaar theme.json voor een WordPress block theme uit één merkkleur. Gratis, draait in je browser. ## Genereer een theme.json-palet en typeschaal in enkele seconden Een AI WordPress thema generator belooft meestal een hele site. Deze doet het deel dat je zelf kunt controleren: een contrastgecontroleerd palet, een modulaire typeschaal en een klaar theme.json voor je block theme. ## Startergenerator voor block themes Kies een merkkleur, een basis en een lettertypecombinatie. Het palet, het contrastrapport en het theme.json werken bij zodra je elk veld wijzigt. *[Interactive widget — see the live page for the full experience]* ## Wat de generator werkelijk berekent ### Een palet uit één kleur Je merkkleur wordt Primair. De tool leest de kleurtoon en bouwt Basis, Oppervlak en Contrast eruit in HSL, op 97, 93 en 11 procent helderheid bij een lichte basis, of op 9, 14 en 92 bij een donkere. Accent ligt 150 graden verder op het kleurenwiel. ### Contrast dat je kunt controleren Vier paren worden gemeten met de WCAG 2.x-luminantieformule: lopende tekst, link, knoptekst en accent. Elk krijgt een ratio en een beoordeling. Haalt de link AA niet, dan schuift de helderheid stap voor stap tot hij slaagt. ### Een modulaire typeschaal Middel is 1rem. Groot, extra groot en enorm vermenigvuldigen met je verhouding één, twee en drie keer, en klein deelt erdoor. Met de verhouding 1.2 krijg je 0.833, 1, 1.2, 1.44 en 1.728 rem. *Kanttekeningen* ## Waarom designtokens vóór patronen komen Een hero-patroon, een kaartenraster en een footer lezen allemaal dezelfde palet-slugs. Als die slugs waarden bevatten die het contrast niet halen, erft elk patroon de fout, en merk je het op de telefoon van de klant. Eerst de tokens repareren betekent dat de patronen die je bouwt, of genereert met Pattern Forge, starten met kleuren die al slagen. Test het resultaat op een echte klantsite, niet in een sandbox. - Palet-slugs worden gedeeld door elk blok en elk patroon - Lettergrootte-slugs houden koppen consistent over sjablonen heen - Eén bewerking in theme.json werkt de hele site bij ## Van gegenereerd bestand naar live thema 1. **Kies de invoer** — Begin met de merkkleur uit het logo van de klant. Kies een lichte basis tenzij het merk van nature donker is, en kies dan de lettertypecombinatie die bij de toon past. 2. **Lees het contrastrapport** — Let op rijen met Niet geslaagd of Alleen grote tekst. Pas de basis of de neutrale kleurtoon aan tot lopende tekst, link en knoptekst allemaal AA halen. 3. **Kopieer het bestand naar je thema** — Klik op Kopieer theme.json, plak het in de root van je block theme, open daarna de Site Editor en controleer of het palet in de kleurkiezer verschijnt. 4. **Verfijn met de hand** — De uitvoer is een startpunt. Hernoem slugs zodat ze bij je designsysteem passen, voeg spacing- en layoutinstellingen toe en commit het bestand samen met de rest van het thema. ## Wat deze tool niet doet ### Geen paginalayouts Het levert tokens, geen sjablonen. Header, footer en paginastructuur komen nog steeds uit je block theme of uit patronen die je in de Site Editor bouwt. ### Geen webfonts Beide combinaties gebruiken systeemstacks om een lettertypeverzoek te vermijden. Merklettertypen hebben een zelf gehoste variabele font en een fontFace-item nodig, dat je zelf toevoegt. ### Geen garantie voor smaak Een palet kan elke contrastcontrole halen en toch vlak ogen. Zie het resultaat als veilige basis en pas Accent en neutrale kleuren met het oog aan op een echte pagina. ## Vragen over de generator ### Is dit echt een AI-thema-generator? Nee, en dat zegt de tool meteen. Het palet, de contrastcontroles en de typeschaal komen uit vaste regels: kleurberekening in HSL, de WCAG-contrastformule en een modulaire schaal. Dat maakt de uitvoer voorspelbaar en controleerbaar. Wil je een taalmodel in het proces, dan genereert Pattern Forge Gutenberg-patronen op basis van een prompt; deze tool levert de designtokens eronder. ### Is het gratis, en slaat het mijn kleuren op? Het is gratis en je hebt geen account nodig. Alles draait in je browser. Het enige dat wordt verstuurd is een anonieme teller die registreert dat de tool is gebruikt, zonder kleurwaarden of tekst uit het formulier. ### Waar komt de contrastratio vandaan? Uit de WCAG 2.x-formule voor relatieve luminantie: elk sRGB-kanaal wordt gelineariseerd, gewogen met 0.2126, 0.7152 en 0.0722, en de ratio is (lichter + 0.05) gedeeld door (donkerder + 0.05). 4.5 tot 1 is de AA-drempel voor lopende tekst, 7 tot 1 is AAA, en 3 tot 1 is de AA-drempel voor grote tekst. ### Waarom verschilt de linkkleur van mijn merkkleur? Een merkkleur haalt vaak niet 4.5 tot 1 tegen een bijna witte of bijna zwarte basis. De generator houdt je merkkleur als Primair, voor knoppen en vlakken, en verschuift de helderheid stap voor stap tot de linkvariant AA haalt op de gekozen basis. ### Op welke WordPress-versie is de uitvoer gericht? Het bestand gebruikt theme.json versie 3, die met WordPress 6.6 kwam (juli 2024). Oudere installaties hebben mogelijk versie 2 nodig, die dezelfde palet- en typografiestructuur heeft, dus je kunt het getal wijzigen en de rest laten staan. ### Laden de lettertypestacks iets van het web? Nee. Beide combinaties gebruiken systeem- en Georgia-achtige stacks, dus er is geen lettertypeverzoek en geen layoutverschuiving door een laat webfont. Als je later een variabel font zelf host, vervang dan de fontFamily-waarden en behoud de slugs. ### Werkt het voor rechts-naar-links-sites? De uitvoer bevat geen links- of rechtswaarden: kleuren, lettergroottes en families zijn richtingsonafhankelijk. Controleer je Arabische of Hebreeuwse font-fallback apart, want systeemstacks verschillen per platform. ### Waar hoort het bestand in mijn thema? Sla het op als theme.json in de root van een block theme en open de Site Editor. Palet-items verschijnen in de kleurkiezer, groottes in het typografiepaneel, en het stijlgedeelte stelt de standaarden voor de hele site in. ## Geef de tokens door aan een patroon, niet aan een lege pagina Zodra theme.json op zijn plek staat, maakt Pattern Forge Gutenberg-patronen die je palet en typeschaal gebruiken. Monk is gratis; Scribe kost $12 per maand. *Call to action: Verlicht je site* ## FAQ ### Is dit echt een AI-thema-generator? Nee, en dat zegt de tool meteen. Het palet, de contrastcontroles en de typeschaal komen uit vaste regels: kleurberekening in HSL, de WCAG-contrastformule en een modulaire schaal. Dat maakt de uitvoer voorspelbaar en controleerbaar. Wil je een taalmodel in het proces, dan genereert Pattern Forge Gutenberg-patronen op basis van een prompt; deze tool levert de designtokens eronder. ### Is het gratis, en slaat het mijn kleuren op? Het is gratis en je hebt geen account nodig. Alles draait in je browser. Het enige dat wordt verstuurd is een anonieme teller die registreert dat de tool is gebruikt, zonder kleurwaarden of tekst uit het formulier. ### Waar komt de contrastratio vandaan? Uit de WCAG 2.x-formule voor relatieve luminantie: elk sRGB-kanaal wordt gelineariseerd, gewogen met 0.2126, 0.7152 en 0.0722, en de ratio is (lichter + 0.05) gedeeld door (donkerder + 0.05). 4.5 tot 1 is de AA-drempel voor lopende tekst, 7 tot 1 is AAA, en 3 tot 1 is de AA-drempel voor grote tekst. ### Waarom verschilt de linkkleur van mijn merkkleur? Een merkkleur haalt vaak niet 4.5 tot 1 tegen een bijna witte of bijna zwarte basis. De generator houdt je merkkleur als Primair, voor knoppen en vlakken, en verschuift de helderheid stap voor stap tot de linkvariant AA haalt op de gekozen basis. ### Op welke WordPress-versie is de uitvoer gericht? Het bestand gebruikt theme.json versie 3, die met WordPress 6.6 kwam (juli 2024). Oudere installaties hebben mogelijk versie 2 nodig, die dezelfde palet- en typografiestructuur heeft, dus je kunt het getal wijzigen en de rest laten staan. ### Laden de lettertypestacks iets van het web? Nee. Beide combinaties gebruiken systeem- en Georgia-achtige stacks, dus er is geen lettertypeverzoek en geen layoutverschuiving door een laat webfont. Als je later een variabel font zelf host, vervang dan de fontFamily-waarden en behoud de slugs. ### Werkt het voor rechts-naar-links-sites? De uitvoer bevat geen links- of rechtswaarden: kleuren, lettergroottes en families zijn richtingsonafhankelijk. Controleer je Arabische of Hebreeuwse font-fallback apart, want systeemstacks verschillen per platform. ### Waar hoort het bestand in mijn thema? Sla het op als theme.json in de root van een block theme en open de Site Editor. Palet-items verschijnen in de kleurkiezer, groottes in het typografiepaneel, en het stijlgedeelte stelt de standaarden voor de hele site in.