Gerador de variáveis de cores CSS
Gere um bloco :root de propriedades personalizadas CSS a partir da paleta. Copie para sua folha de estilos ou arquivo de tokens.
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.
- Exporte as cores da paleta e a escala completa de 50 a 950 como propriedades personalizadas CSS nomeadas.
- Os nomes das variáveis seguem a função ou posição da cor, como base, complement, primary-50 e primary-500.
- Use em navegadores atuais e em projetos que aceitam propriedades personalizadas CSS.
- Copie o bloco :root inteiro pelo painel de exportação.
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.
:root {
--brand: #E24B4A;
--on-brand: #111111;
--surface: #FAFAF8;
--text: #1F2937;
}
.action { background: var(--brand); color: var(--on-brand); }Como usar as variáveis no meu projeto?
Copie o bloco :root do painel de exportação para sua folha principal de estilos ou para um arquivo de tokens. Acesse uma variável com var(--variable-name) em um seletor, inclusive dentro de calc() ou color-mix(), conforme a compatibilidade do projeto.
As variáveis funcionam junto com Tailwind?
Sim. Referencie-as na configuração do tema quando essa sintaxe for adequada à versão usada ou use valores arbitrários nas classes: bg-[var(--base)] e text-[var(--primary-900)].
Posso limitar as variáveis a um componente em vez de :root?
Sim. Substitua :root por um seletor, como .my-component ou [data-theme="brand"] para limitar as variáveis a essa parte da árvore de elementos. Isso ajuda quando diferentes seções da página usam paletas distintas.