Color System & Variables Generator By yagnesh
by Yagnesh Prajapati
Auto-generate Figma Variables, Style Guides, and Semantic Palettes in one click.
Installs
10
Likes
0
Users
112
Views
118
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).
More accessibility tools plugins
View allStark - Contrast & Accessibility AI Checker
by Stark
Fix Color Contrast and Typography issues and add WCAG annotations for a smooth design to dev handoff
Contrast
by Alex Carr
Quickly check and scan for contrast issues on gradients, images, blends, and fills.
Color Palettes ( Colorsinspo ) : Color & Accessibility Tools
by Manthankumar Satani
A free suite of integrated Color & Accessibility tools - 10+ tools free access 🔥
A11y - Color Contrast Checker
by Kelly Gorr
Text color accessibility