🎨
✏️

Generate Color Styles for Figma

Create color palettes to use as Figma Color Styles and design token foundations.

Keine Anmeldung erforderlich
Complementary · 2 colors

Figma tips

✏️

Generate your palette here, then create matching Color Styles in Figma. Paste each hex code when creating a new style.

💡

Figma Variables (design tokens) accept hex colors. Export your palette as hex values and create primitive tokens for each shade.

🎨

The shades palette produces a consistent tonal scale — map these to Figma token names like "primary-100" through "primary-900".

📋

Use "Copy all" to get all hex codes as a comma-separated list, then paste them into your design token JSON file or style guide document.

So funktioniert es

1
Eingabe
Enter your data into the tool above. Everything stays local to your browser.
2
Verarbeiten
The tool processes your data instantly in your browser using JavaScript. No server, no waiting.
3
Herunterladen
Get your result instantly. Nothing is stored after you leave the page — complete privacy.

Warum unseres?

Komplett kostenlos — keine versteckten Kosten, jemals
Kein Konto, keine E-Mail, keine Anmeldung erforderlich
Dateien verlassen nie dein Gerät
Keinerlei Dateigrößenbeschränkungen
Keine Wasserzeichen auf Ausgaben

Also check out…

Häufige Fragen