Spectro - Build Your Color System

Build Your Color System ✨Spectro turns your brand colors into a complete UI color system, directly inside Figma.

Start with a Primary color and optional Secondary color. Spectro generates balanced neutral, brand, and semantic status scales for light and dark interfaces, helping you build a consistent color foundation without adjusting every shade manually.

Preview your colors in real UI components, refine the tonal balance, and save your color systems for future use. When your system is ready, create Figma Variables or export developer-ready CSS and DTCG design tokens.

✅ Features• Generate complete UI color systems from your brand colors• Create balanced neutral and brand color scales• Generate Positive, Negative, Warning, and Info colors• Build and compare Light and Dark themes• Adjust color curves, tonal ranges, and palette density• Get guidance when colors may need adjustment• Preview colors in real UI components• Save and organize multiple color systems locally• Connect your account and sync color systems to the cloud• Create or update Figma Variables• Export CSS variables and DTCG design tokensSpend less time manually building color scales and more time designing consistent interfaces.

Build your color system with Spectro.

Spectro is an independent project built to solve a real design-system problem. Your support helps improve the plugin and keep its core tools accessible to more designers.

Enjoying Spectro? Support the project 🩵