Gerador de temas CSS
Escolha as cores da sua marca e gere no cliente um tema :root com propriedades personalizadas CSS, incluindo tokens derivados de hover, borda e superfície.
🔒 Executa completamente no seu navegador — nada é enviadoTransforme as cores da marca em variáveis CSS
Um tema web prático precisa de mais do que uma cor primária. Os botões precisam de estados hover, os cartões de superfícies, os anéis de foco de transparência e as bordas de um tom que funcione com o fundo da página. Este gerador de temas CSS parte de um conjunto compacto de escolhas de marca e deriva um pequeno bloco de propriedades personalizadas que você pode colar numa folha de estilos. O resultado é intencionalmente simples: variáveis úteis para uma landing page, protótipo, site de documentação ou pequena aplicação, sem o peso de um pipeline completo de tokens.
Escolha as cores primária e de destaque e depois defina o fundo e a cor do texto que determinam o contraste geral. O navegador deriva os valores de hover, superfície, texto atenuado, borda e foco ajustando a luminosidade HSL e aplicando RGB transparente quando apropriado. O cartão de pré-visualização usa as mesmas variáveis mostradas na saída, então você vê rapidamente se o conjunto parece coerente antes de copiar.
Usando o bloco :root gerado
As propriedades personalizadas CSS são mais fáceis de manter quando descrevem a finalidade em vez do matiz bruto. Um nome como --color-primary indica aos futuros colaboradores onde o valor deve ser usado, enquanto --color-blue pode ficar impreciso após uma reformulação. Cole o bloco :root gerado perto do início da sua folha de estilos e depois referencie as variáveis nos componentes. Por exemplo, os botões podem usar --color-primary, os estados hover --color-primary-hover e os painéis --color-surface com --color-border.
Refinando um tema inicial
As cores derivadas são um bom primeiro rascunho, não um substituto para testes. Revise o tema com títulos, textos, controles desativados, campos de formulário, links e alertas reais. Se a cor de hover parecer escura demais, aumente a luminosidade manualmente. Se as bordas desaparecerem no fundo, aumente o contraste delas. Acima de tudo, verifique o contraste do texto em botões e superfícies. O gerador mantém todo o trabalho no navegador, por isso é seguro para as primeiras explorações da marca, mas um design system bem acabado ainda precisa de revisão humana e ajustes em nível de componente.
Como usar
- Escolha as cores da marcaSelecione as cores primária, de destaque, de fundo e de texto do tema.
- Revise os tokens derivadosConfira na pré-visualização os valores de hover, borda, superfície e anel de foco.
- Copie o CSS :rootCole as propriedades personalizadas geradas na sua folha de estilos.