Color System & Variables Generator By yagnesh
Auto-generate Figma Variables, Style Guides, and Semantic Palettes in one click.
Plugin Preview
About this plugin
Stop guessing colors. Start designing systems.
Brand Sprout takes the guesswork out of building color palettes. Simply pick your primary brand color, and let the plugin generate a professional, accessible, and ready-to-use design system instantly.
🚀 Key Features:
âš¡ Instant Local Variables: Automatically creates Figma Variables for all your color primitives and semantic tokens. No manual entry required!
🎨 Complete Color Scales: Generates perfect 50–950 tint and shade scales for your Primary and Neutral colors.
✅ Accessibility First: Built-in "Safe Zone" technology guides you to pick colors that work best for UI, ensuring good contrast ratios.
🌈 Semantic Ready: Auto-generates standard Success, Warning, Error, and Info palettes that harmonize with your brand.
📘 Auto Style Guide: Renders a beautiful documentation frame on your canvas with color codes (HEX/HSL) and usage examples (60-30-10 rule).
Plugin Details
| Version | 1 |
|---|---|
| Created | December 25, 2025 |
| Last Updated | December 28, 2025 |
| Category | Accessibility tools |
| Creator | Yagnesh Prajapati |
| Stats | 0 installs, 0 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Accessibility tools category.
Stark - Contrast & Accessibility Checker
Fix Color Contrast and Typography issues and add WCAG annotations for a smooth design to dev handoff
Contrast
Quickly check and scan for contrast issues on gradients, images, blends, and fills.
Color Palettes ( Colorsinspo ) : Color & Accessibility Tools
A free suite of integrated Color & Accessibility tools - 10+ tools free access 🔥