💄 Geradores

Paleta como CSS Variables

Recebe paleta hex e exporta como bloco de CSS variables (:root { --primary-50: ... }) pronto para usar.

Prefixo Paleta (1 hex por linha — ex: #3b82f6)

Resultado

—

CSS Custom Properties: temas dinâmicos nativos

As CSS Custom Properties (também chamadas CSS Variables) foram introduzidas pelo módulo CSS Custom Properties for Cascading Variables Level 1 e têm suporte universal desde o Chrome 49 (2016). Hoje a cobertura global passa de 96%, tornando-as seguras para qualquer público. Elas trouxeram algo que Sass e Less não conseguiam: variáveis que vivem em tempo de execução, respondem a media queries e podem ser reescritas via JavaScript — convertendo a folha de estilos em algo próximo de um pequeno sistema reativo.

Sintaxe básica

As custom properties são declaradas com dois traços iniciais e consumidas via var(). O local padrão para tokens globais é o pseudo-elemento :root, que aponta para <html>:

:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
}
.button {
  background: var(--color-primary);
}
.button:hover {
  background: var(--color-primary-hover, #1d4ed8);
}

O segundo argumento de var() é um fallback usado quando a variável não existe — uma rede de segurança grátis para navegadores antigos ou temas parciais.

Convenções de nomenclatura que escalam

Token-style — --color-primary-500, --color-primary-600: espelha a rampa 50-950 do Tailwind / Material.
Semântica — --color-text, --color-background, --color-surface: desacopla o significado do hex subjacente, deixando o dark mode a uma única regra de distância.
Estilo BEM — --color-button-bg-hover: preciso porém verboso, ótimo para variáveis com escopo de componente.

Temas dinâmicos e dark mode

Como as variáveis são herdadas pela árvore DOM, alterar um único atributo em <html> reestiliza a aplicação inteira sem duplicar uma única regra. O padrão típico de dark mode é:

:root { --bg: #fff; --fg: #111; }
[data-theme="dark"] { --bg: #0b1220; --fg: #e6edf6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0b1220; --fg: #e6edf6; }
}

Do JavaScript, document.documentElement.style.setProperty('--color-primary', '#ff0000') troca um token em tempo real — ideal para construtores de tema, tenants white-label e previews de design ao vivo.

Design tokens e ferramental

As variáveis geradas por esta ferramenta são, na prática, design tokens — a mesma abstração popularizada por Style Dictionary (Amazon) e Theo (Salesforce), que transformam um JSON-fonte em saídas CSS, iOS, Android e Figma. O tailwind.config.js participa do mesmo pipeline: estender o objeto colors gera utilitários que internamente referenciam variáveis na v4. Amarrar os tokens a uma rampa em HSL ou OKLCH (ex: --hue: 220; --color: hsl(var(--hue) 70% 50%);) permite re-brandear o site inteiro mudando um único número.

Perguntas frequentes

Qual a diferença entre CSS variables e variáveis Sass? Variáveis Sass são resolvidas em tempo de compilação e desaparecem do CSS final. CSS variables vivem em tempo de execução, podem ser inspecionadas no DevTools, mudam com a cascata, reagem a media queries e podem ser mutadas por JavaScript.

Elas prejudicam performance? Não. São uma primitiva nativa do navegador, com custo equivalente a uma busca normal de propriedade; engines modernas (Blink/WebKit/Gecko) otimizam o grafo de dependências agressivamente.

Tematização dinâmica é confiável? Sim — chamar setProperty() em :root dispara recálculo de estilo, mas layout e paint ficam mínimos porque só as propriedades afetadas são invalidadas.

Como se comparam ao CSS-in-JS? Bibliotecas como styled-components e emotion entregam um runtime que injeta estilos por render. CSS variables têm runtime zero: o próprio navegador faz o lookup. Combine os dois quando precisar de tematização dinâmica e lógica com escopo de componente.

Ferramentas Relacionadas

💀

Gerador de Skeleton CSS Loader

Gera o CSS de skeleton loaders animados (shimmer) para placeholders enquanto conteúdo real carrega. Cor e velocidade ajustáveis.

♿

CSS Focus Ring Acessível

Gere um focus ring (anel de foco) CSS acessível, com bom contraste seguindo as diretrizes WCAG. Melhore a navegação por teclado do seu site e copie o código.

🎨

Gerador de Esquemas de Cores

Gere paletas harmônicas a partir de uma cor base: complementares, análogas, triádicas, tetrádicas e split-complementares. Copie os códigos HEX com um clique.