Figma plugin Chameleon. Auto-generate color scales

🦎 CHAMELEON
https://www.figma.com/community/plugin/1500136549076955309/chameleon

Chameleon is a Figma plugin that turns color token management into a breeze. Build smart palettes, structure tokens, and export directly into native Figma Variables.
🎨 KEY FEATURES

🎨 Smart palette generation — create harmonious color ramps from a single base color

🌒 Auto dark theme — instantly generate dark versions of your palettes

♿ A11Y mode — contrast-optimized palettes that meet WCAG accessibility standards

🧷 Figma Variables export — full support for collections, modes, and cross-collection aliases

📤 JSON import/export — compatible with Figma Variables and Token Studio

✏️ Flexible structure — rename shades, palettes, collections, and modes while preserving links
🌒 AUTO DARK THEME

Instantly generate perceptually balanced dark palettes based on your light theme.

How it works:
Inverts brightness scale: lightest shade (50) becomes darkest, darkest (900) becomes lightest
Base color remains at position 500
Brightness follows a perceptual (non-linear) scale
Saturation is increased for dark shades, reduced for light ones
Additional correction ensures visual harmony
🎨 BASE MODE

Best for:
Creating aesthetic palettes without strict contrast rules
Branding and accent color systems
Visually balanced UIs with emphasis on artistic control

Generation logic:
Base color is placed at center (shade 500)
Builds out lighter (50–400) and darker (600–900) shades
Brightness and saturation adjust relative to the base
♿ A11Y MODE

Palettes generated with perceptual brightness, ensuring strong contrast between shades.

Best for:
Interfaces requiring WCAG compliance
Government, medical, educational and fintech products
Inclusive design for wide audiences

Generation logic:
Builds a scale of perceived brightness
Base color is positioned where its brightness fits best
Shades are calibrated for target contrast
Contrast between neighbors ≥ 1.3:1
📌 HOW TO USE

1. Create your base palettes in the "Global" tab (5 to 15 shades)
2. Enable A11Y mode if needed
3. Switch between light and dark themes to evaluate the result
4. Export everything to Figma Variables or JSON
⚙️ UINDER YHE HOOD

HSL-based ramp generation
Edge brightness: Light — 95% → 20%, Dark — 15% → 85%
Auto positioning of base color (especially in A11Y mode)
Built-in WCAG contrast checker
Visual base marker (★)
Full support for Figma Variables & Token Studio structure

Видео Figma plugin Chameleon. Auto-generate color scales канала Yevhen Peshynskyi (ikstro)