# Gerador de Temas WordPress IA Gratuito para Blocos URL: https://noonwp.com/pt/tools/gerador-de-temas-wordpress-ia Type: tool Locale: pt Published: 2026-10-21 Updated: 2026-10-25 --- > Gere uma paleta com contraste verificado, uma escala tipográfica modular e um theme.json pronto para um tema de blocos WordPress a partir de uma cor da marca. Gratuito, roda no navegador. ## Gere uma paleta theme.json e uma escala tipográfica em segundos Um gerador de temas WordPress IA costuma prometer um site inteiro. Este faz a parte que você consegue verificar: uma paleta com contraste checado, uma escala tipográfica modular e um theme.json pronto para o seu tema de blocos. ## Gerador de tema inicial para tema de blocos Escolha uma cor da marca, uma base e uma combinação de fontes. A paleta, o relatório de contraste e o theme.json são atualizados conforme você altera cada campo. *[Interactive widget — see the live page for the full experience]* ## O que o gerador realmente calcula ### Uma paleta a partir de uma cor A cor da sua marca vira a Primária. A ferramenta lê o matiz dela e monta Base, Superfície e Contraste a partir dele, em HSL, com luminosidade de 97, 93 e 11 por cento em base clara, ou 9, 14 e 92 em base escura. O Destaque fica a 150 graus dela na roda de cores. ### Contraste que você pode conferir Quatro pares são medidos com a fórmula de luminância do WCAG 2.x: texto corrido, link, texto do botão e destaque. Cada um recebe uma razão e uma classificação. Se o link reprovar no AA, a luminosidade dele se move um passo por vez até passar. ### Uma escala tipográfica modular O tamanho médio vale 1rem. Grande, extra grande e enorme multiplicam pela sua proporção uma, duas e três vezes, e o pequeno divide por ela. Com a proporção 1.2, você obtém 0.833, 1, 1.2, 1.44 e 1.728 rem. *Marginália* ## Por que os tokens de design vêm antes dos padrões Um padrão de cabeçalho, uma grade de cards e um rodapé leem os mesmos slugs de paleta. Quando esses valores falham no contraste, cada padrão herda a falha, e você descobre isso no celular do cliente. Corrigir os tokens primeiro garante que os padrões que você construir, ou gerar com o Pattern Forge, partam de cores que já passam. Teste o resultado num site de cliente real, não num sandbox. - Os slugs de paleta são compartilhados por todos os blocos e padrões - Os slugs de tamanho de fonte mantêm os títulos consistentes entre os templates - Uma edição no theme.json atualiza o site inteiro ## Do arquivo gerado ao tema no ar 1. **Escolha os valores** — Comece com a cor da marca, tirada do logo do cliente. Escolha uma base clara, a menos que a marca seja escura por natureza, e depois a combinação de fontes que combina com o tom. 2. **Leia o relatório de contraste** — Procure qualquer linha marcada como Reprovado ou Só texto grande. Altere a base ou o tom neutro até que o texto corrido, o link e o texto do botão passem no AA. 3. **Copie o arquivo para o seu tema** — Clique em Copiar theme.json, cole na raiz do seu tema de blocos e depois abra o Editor do site para confirmar que a paleta aparece no seletor de cores. 4. **Refine à mão** — O resultado é um ponto de partida. Renomeie os slugs para combinar com o seu sistema de design, adicione configurações de espaçamento e layout e faça commit do arquivo junto com o resto do tema. ## O que esta ferramenta não faz ### Sem layouts de página Ela gera tokens, não templates. Cabeçalho, rodapé e estrutura da página continuam vindo do seu tema de blocos ou dos padrões que você cria no Editor do site. ### Sem fontes da web As duas combinações usam pilhas de fontes do sistema para evitar qualquer requisição de fonte. Tipografias da marca precisam de uma fonte variável hospedada por você e de uma entrada fontFace, que você mesmo adiciona. ### Sem garantia de gosto Uma paleta pode passar em todas as checagens de contraste e ainda assim parecer chapada. Trate o resultado como uma base segura e depois ajuste Destaque e neutros a olho numa página real. ## Perguntas sobre o gerador ### Isto é mesmo um gerador de tema com IA? Não, e a ferramenta diz isso logo de cara. A paleta, as checagens de contraste e a escala tipográfica vêm de regras fixas: matemática de cores em HSL, a fórmula de contraste do WCAG e uma escala modular. Isso torna o resultado previsível e testável. Se você quiser um modelo de linguagem no processo, o Pattern Forge gera padrões Gutenberg a partir de um prompt; esta ferramenta cobre os tokens de design que ficam por baixo deles. ### É gratuito, e guarda minhas cores? É gratuito e não exige conta. Tudo roda no seu navegador. A única coisa enviada é um contador anônimo que registra que a ferramenta foi usada, sem valores de cor nem texto do formulário. ### De onde vem a razão de contraste? Da fórmula de luminância relativa do WCAG 2.x: cada canal sRGB é linearizado, ponderado por 0.2126, 0.7152 e 0.0722, e a razão é (a mais clara + 0.05) dividida por (a mais escura + 0.05). 4.5 para 1 é o limiar AA para texto corrido, 7 para 1 é AAA, e 3 para 1 é o limiar AA para texto grande. ### Por que a cor do Link é diferente da cor da minha marca? Uma cor de marca costuma reprovar a razão de 4.5 para 1 contra uma base quase branca ou quase preta. O gerador mantém a sua cor da marca como Primária, para botões e preenchimentos, e ajusta a luminosidade dela um passo por vez até que a variante de Link passe no AA sobre a base escolhida. ### Para qual versão do WordPress a saída é feita? O arquivo usa o theme.json versão 3, lançado com o WordPress 6.6 (julho de 2024). Instalações mais antigas podem precisar da versão 2, que tem a mesma estrutura de paleta e tipografia, então você pode trocar o número e manter o resto. ### As pilhas de fontes carregam algo da web? Não. As duas combinações usam pilhas do sistema no estilo Georgia, então não há requisição de fonte nem deslocamento de layout causado por uma fonte web que chega tarde. Se você hospedar uma fonte variável depois, troque os valores de fontFamily e mantenha os slugs. ### Funciona para sites da direita para a esquerda? A saída não tem valores de esquerda ou direita: cores, tamanhos de fonte e famílias são independentes de direção. Verifique separadamente o fallback de fonte para árabe ou hebraico, já que as pilhas do sistema variam em cada plataforma. ### Onde o arquivo vai no meu tema? Salve-o como theme.json na raiz de um tema de blocos e abra o Editor do site. As entradas da paleta aparecem no seletor de cores, os tamanhos no painel de tipografia, e a seção de estilos define os padrões do site inteiro. ## Passe os tokens para um padrão, não para uma página em branco Com o theme.json no lugar, o Pattern Forge cria padrões Gutenberg que usam a sua paleta e a sua escala tipográfica. O Monk é gratuito; o Scribe custa $12/mês. *Call to action: Ilumine o seu site* ## FAQ ### Isto é mesmo um gerador de tema com IA? Não, e a ferramenta diz isso logo de cara. A paleta, as checagens de contraste e a escala tipográfica vêm de regras fixas: matemática de cores em HSL, a fórmula de contraste do WCAG e uma escala modular. Isso torna o resultado previsível e testável. Se você quiser um modelo de linguagem no processo, o Pattern Forge gera padrões Gutenberg a partir de um prompt; esta ferramenta cobre os tokens de design que ficam por baixo deles. ### É gratuito, e guarda minhas cores? É gratuito e não exige conta. Tudo roda no seu navegador. A única coisa enviada é um contador anônimo que registra que a ferramenta foi usada, sem valores de cor nem texto do formulário. ### De onde vem a razão de contraste? Da fórmula de luminância relativa do WCAG 2.x: cada canal sRGB é linearizado, ponderado por 0.2126, 0.7152 e 0.0722, e a razão é (a mais clara + 0.05) dividida por (a mais escura + 0.05). 4.5 para 1 é o limiar AA para texto corrido, 7 para 1 é AAA, e 3 para 1 é o limiar AA para texto grande. ### Por que a cor do Link é diferente da cor da minha marca? Uma cor de marca costuma reprovar a razão de 4.5 para 1 contra uma base quase branca ou quase preta. O gerador mantém a sua cor da marca como Primária, para botões e preenchimentos, e ajusta a luminosidade dela um passo por vez até que a variante de Link passe no AA sobre a base escolhida. ### Para qual versão do WordPress a saída é feita? O arquivo usa o theme.json versão 3, lançado com o WordPress 6.6 (julho de 2024). Instalações mais antigas podem precisar da versão 2, que tem a mesma estrutura de paleta e tipografia, então você pode trocar o número e manter o resto. ### As pilhas de fontes carregam algo da web? Não. As duas combinações usam pilhas do sistema no estilo Georgia, então não há requisição de fonte nem deslocamento de layout causado por uma fonte web que chega tarde. Se você hospedar uma fonte variável depois, troque os valores de fontFamily e mantenha os slugs. ### Funciona para sites da direita para a esquerda? A saída não tem valores de esquerda ou direita: cores, tamanhos de fonte e famílias são independentes de direção. Verifique separadamente o fallback de fonte para árabe ou hebraico, já que as pilhas do sistema variam em cada plataforma. ### Onde o arquivo vai no meu tema? Salve-o como theme.json na raiz de um tema de blocos e abra o Editor do site. As entradas da paleta aparecem no seletor de cores, os tamanhos no painel de tipografia, e a seção de estilos define os padrões do site inteiro.