Gerador de cores Tailwind
Gere uma escala de onze tons, de 50 a 950, na ferramenta principal e exporte uma configuração Tailwind v3.
Este guia explica o processo. Use a ferramenta indicada abaixo para gerar cores e exportar arquivos.
O que esta página explica
Esta página explica o processo e leva diretamente à seção correspondente da ferramenta principal do Chromoforge.
- Escolha uma cor base e obtenha uma escala de onze tons, de 50 a 950.
- Copie o bloco theme.extend de tailwind.config.js para seu projeto Tailwind v3.
- Confira o contraste antes de usar os tons gerados como fundo de texto.
- Funciona localmente no navegador, sem envio de imagens e sem conta.
Exemplo prático
Teste o texto e o fundo reais em conjunto. O nome da cor ou o número do tom não garante a legibilidade.
/* Tailwind CSS v4: after @import "tailwindcss"; */
@theme {
--color-brand: #E24B4A;
--color-on-brand: #111111;
}
/* class="bg-brand text-on-brand" */
/* For v3, use theme.extend.colors in tailwind.config.js. */Com qual versão do Tailwind a exportação funciona?
A exportação Tailwind da ferramenta principal usa o formato theme.extend da v3. Na v4, defina as cores como variáveis --color-* dentro de @theme. Um bloco :root sozinho não cria utilitários de cores do Tailwind. A ferramenta de tons também oferece uma exportação específica para a v4.
Para que serve o tom 500?
A cor base é preservada no tom mais próximo da sua luminosidade OKLCH, que pode ser diferente de 500. Confira os tons reais antes de escolher cores para texto, superfícies e botões.
Posso usar mais de uma escala principal?
A ferramenta principal exporta uma escala de cor base por vez. Gere e copie as outras escalas separadamente e combine-as no projeto.