Praktisches Farbtool

Design-Token-Generator

Erstelle Farb Design Tokens aus einer Palette und exportiere CSS Variablen, SCSS Maps, JSON und Tailwind Werte.

Im Haupttool öffnenZurück zum Tool
EnglishItalianoEspañolFrançaisDeutsch

Was diese Seite bietet

  • Konvertiere HEX Werte in benannte Tokens.
  • Nutze numerische Skalen für Shades und semantische Namen für UI Rollen.
  • Exportiere JSON für Design und Build Tools.

Gut für

  • Design Systeme
  • Token Handoff
  • Frontend Teams

So nutzt du es

Paletten GeneratorErstelle zugängliche Farbpaletten, prüfe WCAG-Kontrast, extrahiere Bildfarben und exportiere CSS, Tailwind, SCSS, JSON, SVG und PNG.WCAG CheckPrüfe Text- und Hintergrundkontraste nach WCAG AA und AAA, teste echte Farbpaare und wähle lesbare Kombinationen.Bild ExtraktorExtrahiere dominante Farben aus PNG-, JPG- oder WebP-Bildern lokal im Browser und erstelle exportierbare Paletten.
Kann ich das mit dem Hauptgenerator nutzen?

Ja. Starte hier, öffne das Chromoforge Tool mit derselben Basisfarbe und exportiere die Palette.

Was unterscheidet primitive von semantischen Tokens?

Primitive benennen Rohwerte wie blue-500 oder gray-900. Semantische Tokens benennen die Absicht, etwa color-action-background oder color-text-muted, und verweisen auf ein Primitiv. Komponenten sollten ausschließlich semantische Tokens nutzen, dann ändert ein Rebranding oder ein neues Theme nur eine Indirektionsebene statt jeder Komponente.

Welches Exportformat gehört ins Repository?

CSS Custom Properties, wenn das Theme zur Laufzeit im Browser wechseln soll. JSON, wenn die Tokens eine plattformübergreifende Pipeline wie Style Dictionary speisen und auch iOS oder Android erreichen müssen. SCSS-Variablen nur, wenn alles zur Build-Zeit aufgelöst wird und kein Laufzeit-Theming nötig ist.