Back to Plugins
Color Scale Generator

Color Scale Generator

Generate color scales directly into Figma Variables

Plugin Preview

Color Scale Generator preview

About this plugin

Generate consistent color scales directly into Figma Variables.CSG: Color Scale Generator helps you quickly build structured color systems and design tokens from a few base colors. Create scales using multiple interpolation methods and export them as organized variables in your Figma collections.This version introduces direct color copy from Palette Preview, cleaner settings organization, optional project-based settings persistence, and improved theme support. You can now safely manage regeneration behavior, store plugin settings in Figma Variables or Local Storage, and work with Follow Figma, Light, or Dark theme modes.Features• Start from existing tokens or build from scratch• Linear and perceptual color scales• Tailwind scale preset• Adjustable scale density (Coarse, Medium, Fine)• Preview scales before generation• Copy generated colors directly from Palette Preview• Sync color scales with existing Figma variables• Regenerate variables within a selected scope• Generate structured variables directly in Figma collections• Store plugin settings in Figma Variables or Local Storage• Follow Figma theme automatically or use fixed Light / Dark themes• Automatic color guide generation• Custom scale generation from base colors• Organized naming paths for scalable design systemsUse cases• Building scalable color systems• Creating and maintaining design tokens• Generating palette scales (100–900 and extended scales)• Syncing tokens with existing Figma variable collections• Preparing tokens for Tailwind / Material style systems• Generating visual color guides for documentationCompatibilityWorks with Figma Variables and structured naming paths to support scalable design systems and token-based workflows.

Plugin Details

Version31
CreatedMarch 6, 2026
Last UpdatedApril 1, 2026
Categorydesign-tools-other
CreatorMisha Grebennikov
Stats1 installs, 1 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none