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

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

Generatore paletteCrea design token colore da una palette ed esporta CSS variables, SCSS map, JSON e valori Tailwind.Controllo WCAGCrea design token colore da una palette ed esporta CSS variables, SCSS map, JSON e valori Tailwind.Estrattore immaginiCrea design token colore da una palette ed esporta CSS variables, SCSS map, JSON e valori Tailwind.
Posso usarlo con il generatore principale?

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