Color Grade Generator V1.0
by danwil
Unlock Effortless Themes: One Base Color, Perfectly Generated.
Installs
1
Likes
0
Users
15
Views
32
Preview
About this plugin
The Color Grade Generator is a powerful, time-saving Figma plugin designed for designers building scalable design systems. Tired of manually creating endless light and dark mode swatches? With just a single key base color, this plugin automatically generates a full, semantic range of color values (from 50 to 900), complete with precise hex codes.
Key Features:
Instant Color Ramps: Generate a full color system instantly—no more complex math or guesswork.
Automatic Token Mapping: See how the generated colors are automatically assigned to standard design tokens like background.default, border.default, and text.primary for both light and dark modes.
Built-in Accessibility Checks: Ensure your designs meet WCAG AAA and AA standards. The plugin provides real-time, side-by-side contrast scores for light and dark themes.
Live UI Previews: Validate your theme colors immediately. The plugin includes a visual "Implementation Preview" featuring essential UI elements (buttons, links, text fields, and success messages) to show exactly how your tokens translate into light and dark interfaces.
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