Strumento colore pratico

Generatore design token

Crea design token colore da una palette ed esporta CSS variables, SCSS map, JSON e valori Tailwind.

Apri nel tool principaleTorna allo strumento
EnglishItalianoEspañolFrançaisDeutsch

Cosa offre questa pagina

  • Converti HEX grezzi in token nominati.
  • Usa scale numeriche per shade e nomi semantici per ruoli UI.
  • Esporta JSON per passare token tra design e build tool.

Ideale per

  • Design system
  • Handoff token
  • Team frontend

Come usarlo

Generatore paletteCrea palette accessibili, controlla il contrasto WCAG, estrai colori dalle immagini ed esporta CSS, Tailwind, SCSS, JSON, SVG e PNG.Controllo WCAGVerifica contrasto tra testo e sfondo secondo WCAG AA e AAA, testa coppie colore reali e scegli combinazioni leggibili.Estrattore immaginiEstrai colori dominanti da immagini PNG, JPG o WebP direttamente nel browser e trasformali in palette e token esportabili.
Posso usarlo con il generatore principale?

Sì. Parti da questa pagina, poi apri lo strumento Chromoforge con lo stesso colore base ed esporta la palette.

Che differenza c'e tra token primitivi e semantici?

I primitivi nominano valori grezzi, come blue-500 o gray-900. I token semantici nominano l'intento, come color-action-background o color-text-muted, e puntano a un primitivo. I componenti dovrebbero consumare solo token semantici, cosi un rebrand o un nuovo tema cambia un livello di indirezione invece di ogni componente.

Quale formato di export conviene mettere nel repository?

Le custom properties CSS quando il tema deve cambiare a runtime nel browser. JSON quando i token alimentano una pipeline multipiattaforma come Style Dictionary e devono arrivare anche a iOS o Android. Le variabili SCSS solo se tutto si risolve in fase di build e non serve il theming a runtime.