Color Palette Generator

With Color Palette Generator you can transform any color into a complete, balanced design system in Figma.

With just a few clicks, generate color scales, create variables, and export ready-to-use styles, perfect for building design systems.----------------------------------------------------------------------Overview----------------------------------------------------------------------Purpose: Turn base colors into organized design system palettes with variables and stylesWho it’s for: UI/UX designers creating scalable, consistent design systems in Figma----------------------------------------------------------------------Features----------------------------------------------------------------------1. Smart Color ScalesGenerate 11 balanced shades from any base colorShades: 50 → 950, with the original color at 5002. Variable CreationConvert colors into structured variable collectionsSupports multiple theme modes (e.g., Light, Dark)Organize with naming conventions like Brand/Primary or Light/UI/Background3. Style ExportOne-click export of all variables into Figma color stylesEnsures consistency and prevents duplicates----------------------------------------------------------------------Workflow (3 Steps)----------------------------------------------------------------------1. Generate Color Scale (optional)Select a color object on the canvasEnter a color name and choose a theme modePlugin creates an 11-shade palette2. Create VariablesSelect one or more color objectsEnter a collection namePlugin creates organized variables inside Figma3. Export StylesConvert all existing variables into color styles with one click----------------------------------------------------------------------Requirements----------------------------------------------------------------------Figma desktop or web appOne or more color objects with solid fills on the canvas----------------------------------------------------------------------⚠️ Common Issues----------------------------------------------------------------------Figma plan limitations may restrict use of multiple theme modesOnly works with solid fill colors (no gradients)You must create variables before exporting styles----------------------------------------------------------------------💡 Tips----------------------------------------------------------------------Start with your brand primary color to quickly generate a full paletteUse descriptive names (e.g., Brand/Primary) to keep collections organizedGenerate scales once, then reuse them across multiple themes----------------------------------------------------------------------✅ You’re Ready!

Install Color Palette Generator, select a color, and start building your design system in minutes.