ColorStyle Pro

About this plugin

ColorStyle Pro

Streamline your color workflow in Figma! ColorStyle Pro helps you create, organize, and apply color styles, palettes, scales, accents, and more, in just a few clicks.

Features:

1. Generate primary, secondary, grey, info, success, alert, and danger palettes
2. Automatically create tints and optional dark shades
3. Include real gradient tokens with preserved type & angle
4. Auto-generate WCAG contrast ratios (against black and white)
5. Show AA/AAA accessibility badges for each swatch
6. Apply style descriptions (hex + WCAG info) for dev handoff
7. Produce a clean visual color guide frame in Figma
8. Export styles as CSS, SCSS, or JSON tokens

How to Use ColorStylePro

1️⃣ Install & Open the Plugin

Go to the Figma Community page for ColorStylePro.

Click Install and then run it from the Plugins menu (Right-click → Plugins → ColorStylePro).

2️⃣ Set Your Base Colors

In the plugin UI, enter valid HEX codes for:

Primary

Secondary

Grey

Info

Success

Alert

Danger

3️⃣ Choose Options

Tints only or Tints + Dark Shades

Select your naming convention (e.g., Brand.Group.Level or Group / Level)

Pick your export format: CSS, SCSS, or JSON

4️⃣ (Optional) Include Gradients

Select frames in your design that contain gradients.

The plugin will detect and include them in the export.

5️⃣ Generate

Click Generate & Export.

The plugin will:

Create all color styles in Figma

Add WCAG contrast ratios & accessibility info

Build a Visual Color Guide frame

Create a Tokens for Devs frame with your chosen export format

6️⃣ Handoff to Developers

Share the Figma file with your dev team.

They can copy the generated CSS, SCSS, or JSON variables directly.

💡 Tip: You can re-run ColorStylePro anytime to update colors — existing styles will be updated automatically without duplicates.