Generatore variabili colore CSS
Genera custom properties CSS e design token da una palette colori.
Cosa copre questa pagina
Questa pagina spiega il flusso di lavoro e collega direttamente alla sezione corretta dello strumento principale Chromaforge.
- Genera palette da un colore base.
- Controlla il contrasto prima di pubblicare testo UI.
- Esporta CSS, Tailwind, SCSS, JSON, SVG e PNG.
- Funziona localmente nel browser.
Come funziona il generatore di variabili CSS
Le custom properties CSS (variabili) sono il modo più robusto per gestire un sistema di colori in un progetto web. Definisci i valori una volta nel selettore :root, poi riusali ovunque con var(--nome-variabile).
Chromaforge genera il blocco :root completo dalla tua palette, con nomi semantici pronti all'uso: --color-primary-500, --color-neutral-100, --color-accent ecc. Puoi scegliere la convenzione di naming che preferisci (numerica, semantica, o entrambe).
Il vantaggio rispetto a hardcodare i hex è evidente quando devi gestire la dark mode: definisci un secondo blocco [data-theme="dark"] con gli stessi nomi variabile ma valori invertiti. Il browser gestisce tutto il resto automaticamente, senza JavaScript aggiuntivo.
Chromaforge esporta anche in formato SCSS con variabili $colore per chi usa preprocessori. E in formato JSON compatibile con W3C Design Tokens per chi lavora con Tokens Studio, Style Dictionary o sistemi di design strutturati.
Esempi pratici
- Progetto nuovo: genera le variabili dal brand color, incolla in un file
tokens.cssimportato come primo stylesheet. Da quel momento usi solo i nomi semantici nel CSS dei componenti. - Dark mode rapida: l'esportazione include già il blocco
[data-theme="dark"]con i valori invertiti; collegalo a un toggle HTML e la dark mode è pronta. - Migrazione da SCSS: sostituisci le variabili SCSS
$color-primarycon custom properties CSS e guadagni la possibilità di cambiarle a runtime (animazioni, temi utente). - Design tokens con Style Dictionary: esporta in JSON e importa direttamente in Style Dictionary per generare output multipiattaforma (iOS, Android, web).
FAQ — Variabili colore CSS
Qual è la differenza tra custom properties CSS e variabili SCSS?
Le variabili SCSS esistono solo in fase di compilazione: vengono sostituite con i valori finali nel CSS generato. Le custom properties CSS esistono a runtime nel browser, si possono leggere e modificare via JavaScript, ereditano in cascata e si possono sovrascrivere per selettori specifici. Per la dark mode e i temi dinamici, le custom properties CSS sono superiori.
Come nomino le variabili in modo scalabile?
Una convenzione solida usa due livelli: primitivi (il valore grezzo, es. --blue-600: #2563eb) e semantici (il ruolo, es. --color-action: var(--blue-600)). Nei componenti usi solo i semantici. Quando cambi brand, modifichi solo il mapping, non ogni componente.
Le custom properties funzionano in tutti i browser moderni?
Sì. Il supporto è universale nei browser moderni da diversi anni (Chrome 49+, Firefox 31+, Safari 9.1+). Se devi supportare IE11, le custom properties non sono supportate e dovrai usare un fallback con valori hardcodati o un polyfill.
Posso usare le variabili CSS direttamente in Tailwind?
Sì, in Tailwind v3 puoi usare valori arbitrari come bg-[var(--color-primary)]. In Tailwind v4, il sistema si basa nativamente su custom properties CSS, rendendo l'integrazione ancora più diretta tramite il blocco @theme.
Cosa sono i design token e come si differenziano dalle variabili?
I design token sono variabili con metadati strutturati (tipo, categoria, descrizione) in un formato standard come JSON o YAML. Permettono di generare variabili CSS, costanti Swift, risorse Android e file Figma dallo stesso sorgente. Chromaforge esporta un JSON base compatibile con il formato W3C Design Tokens.