Color Palette Generator

About this plugin

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

----------------------------------------------------------------------

1. Purpose: Turn base colors into organized design system palettes with variables and styles
2. Who it’s for: UI/UX designers creating scalable, consistent design systems in Figma

----------------------------------------------------------------------

Features

----------------------------------------------------------------------

1. Smart Color Scales

1. Generate 11 balanced shades from any base color
2. Shades: 50 → 950, with the original color at 500

2. Variable Creation

1. Convert colors into structured variable collections
2. Supports multiple theme modes (e.g., Light, Dark)
3. Organize with naming conventions like Brand/Primary or Light/UI/Background

3. Style Export

1. One-click export of all variables into Figma color styles
2. Ensures consistency and prevents duplicates

----------------------------------------------------------------------

Workflow (3 Steps)

----------------------------------------------------------------------

1. Generate Color Scale (optional)

1. Select a color object on the canvas
2. Enter a color name and choose a theme mode
3. Plugin creates an 11-shade palette

2. Create Variables

1. Select one or more color objects
2. Enter a collection name
3. Plugin creates organized variables inside Figma

3. Export Styles

1. Convert all existing variables into color styles with one click

----------------------------------------------------------------------

Requirements

----------------------------------------------------------------------

1. Figma desktop or web app
2. One or more color objects with solid fills on the canvas

----------------------------------------------------------------------

⚠️ Common Issues

----------------------------------------------------------------------

1. Figma plan limitations may restrict use of multiple theme modes
2. Only works with solid fill colors (no gradients)
3. You must create variables before exporting styles

----------------------------------------------------------------------

💡 Tips

----------------------------------------------------------------------

1. Start with your brand primary color to quickly generate a full palette
2. Use descriptive names (e.g., Brand/Primary) to keep collections organized
3. Generate 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.