ColorStyle Pro

About this plugin

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.