Design-Token-Generator

Erstelle Farbskalen und exportiere als CSS-Variablen, Tailwind-Config, SCSS, JSON oder Figma-Tokens.

Color Scales

brand

100

200

300

400

500

600

700

800

900

950

:root {
  --brand-50: #f7f5ff;
  --brand-100: #ede8fe;
  --brand-200: #dad2fc;
  --brand-300: #beb3fa;
  --brand-400: #998ff6;
  --brand-500: #6366f1;
  --brand-600: #4e52bc;
  --brand-700: #3c408d;
  --brand-800: #2d3269;
  --brand-900: #21264a;
  --brand-950: #191f38;
}

Häufig gestellte Fragen

Was sind Design-Tokens?

Design-Tokens sind benannte Farbwerte, die die Grundlage eines Designsystems bilden.

Kann ich mehrere Farbskalen hinzufügen?

Ja — klicke auf 'Hinzufügen'. Jede erhält eine eigene 11-stufige Skala.

Was ist das Figma-Tokens-Format?

Das Figma-Format gibt eine JSON-Struktur aus, die mit dem Figma Tokens Plugin kompatibel ist.