ColorStyle Pro

ColorStyle ProStreamline 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:

Generate primary, secondary, grey, info, success, alert, and danger palettesAutomatically create tints and optional dark shadesInclude real gradient tokens with preserved type & angleAuto-generate WCAG contrast ratios (against black and white)Show AA/AAA accessibility badges for each swatchApply style descriptions (hex + WCAG info) for dev handoffProduce a clean visual color guide frame in FigmaExport styles as CSS, SCSS, or JSON tokensHow to Use ColorStylePro1️⃣ Install & Open the PluginGo 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 ColorsIn the plugin UI, enter valid HEX codes for:

PrimarySecondaryGreyInfoSuccessAlertDanger3️⃣ Choose OptionsTints only or Tints + Dark ShadesSelect your naming convention (e.g., Brand.

Group.

Level or Group / Level)Pick your export format: CSS, SCSS, or JSON4️⃣ (Optional) Include GradientsSelect frames in your design that contain gradients.

The plugin will detect and include them in the export.

5️⃣ GenerateClick Generate & Export.

The plugin will:

Create all color styles in FigmaAdd WCAG contrast ratios & accessibility infoBuild a Visual Color Guide frameCreate a Tokens for Devs frame with your chosen export format6️⃣ Handoff to DevelopersShare 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.