Risposta diretta
Un generatore di token colore serializza il sistema revisionato in proprietà personalizzate CSS, blocchi @theme di Tailwind CSS v4 e JSON DTCG, assicurando perfetta corrispondenza tra codice e anteprima visiva.
Come usare questo strumento
Raggiungi la fase token
Apri il generatore di token o prosegui dal verificatore con il medesimo documento colore in memoria.
Seleziona il formato
Scegli tra proprietà CSS, Tailwind v4 @theme o JSON DTCG. Ciascun formato rispecchia fedelmente primitive e alias approvati.
Copia o scarica l'artefatto
Copia negli appunti o scarica il file. Le esportazioni includono fallback sRGB deterministici per colori ad ampio gamut.
Proiezione affidabile e coerenza multipiattaforma
I token esportati rispecchiano con accuratezza il sistema approvato: scale primitive, alias semantici e modalità di tema. I colori moderni ad ampio gamut mantengono alternative sRGB percettive per prevenire distorsioni su schermi standard.
- Le esportazioni CSS, Tailwind @theme e DTCG restano perfettamente sincronizzate con la revisione corrente del documento.
- Nessun archivio di token remoto né registrazione di account richiesti.
- Copia e download degradano in modo controllato se le API del browser risultano parzialmente limitate.
Esempi pratici
Esportare la scala Primary in Tailwind @theme
Input: Scala Primary 50–950 revisionata + ruoli primary/on-primary
Output: @theme { --color-primary-500: oklch(...); --color-primary: var(--color-primary-500); }
Produce variabili di tema pronte per i moderni framework senza discrepanze di trascrizione manuale.
Limitazioni
- Non effettua il push automatico verso tool di design remoti; copia o scarica i file in locale.
- Se utilizzi una pipeline con convenzioni proprietarie, mappa gli alias DTCG nella tua configurazione di build.
Domande frequenti
Le esportazioni corrispondono ai valori del verificatore?
Sì. Gli artefatti derivano dallo stesso documento visibile in anteprima, escludendo divergenze in fase di handoff.
I token vengono caricati online?
No. Serializzazione, scrittura negli appunti e download avvengono localmente. Gli URL di condivisione risiedono unicamente nel fragment.
Posso tornare al builder senza perdere le esportazioni?
Sì. I cambi di fase mantengono intatto il documento; riesportare dopo ulteriori modifiche genererà l'artefatto aggiornato.
Riferimenti autorevoli e standard
- W3C CSS Color Module Level 4 ↗ — Modern color functions serialized into CSS custom properties with sRGB fallbacks.
- W3C Relative Luminance Definition & Formula ↗ — Luminance guidance for documenting accessible token pairs in exported artifacts.