Color Palette Generator Variable/Styles

About this plugin

Tailwind-style Palette Generator

Instantly generate consistent, professional color scales from a single base color.

Stop wasting time manually calculating tint and shade percentages. This plugin takes a single Hex code and generates a complete 8-step palette (100–800) using a Tailwind-inspired mixing algorithm.

It is designed for modern Figma workflows, automatically generating Variables (primitives) and Styles for you.

⚡ Key Features

Smart Scaling: Generates an 8-step scale (100–800) balanced around your base color.

Variables Support: Automatically creates Local Variables (Color Primitives) with proper alpha channels.

Collection Management: Create new Variable Collections or add to existing ones directly from the UI.

Local Styles: Auto-generates Paint Styles for legacy workflows or fill usage.

Visual Documentation: Draws a beautiful, documentation-ready frame on your canvas with hex codes and contrast labels.

Live Preview: See your gradient steps update in real-time as you tweak the hex code.

🛠 How to use

Run the plugin.

Enter a Palette Name (e.g., "Primary", "Success").

Pick a Base Color using the native picker or Hex input.

Select where to save variables (Create a new collection or add to an existing one).

Click Generate.

Perfect for setting up design systems, theme files, or quick project prototyping.