Chameleon

About this plugin

🦎 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:

1. Inverts brightness scale: lightest shade (50) becomes darkest, darkest (900) becomes lightest
2. Base color remains at position 500
3. Brightness follows a perceptual (non-linear) scale
4. Saturation is increased for dark shades, reduced for light ones
5. Additional correction ensures visual harmony

🎨 BASE MODE

Best for:

1. Creating aesthetic palettes without strict contrast rules
2. Branding and accent color systems
3. Visually balanced UIs with emphasis on artistic control

Generation logic:

1. Base color is placed at center (shade 500)
2. Builds out lighter (50–400) and darker (600–900) shades
3. Brightness and saturation adjust relative to the base

♿ A11Y MODE

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

Best for:

1. Interfaces requiring WCAG compliance
2. Government, medical, educational and fintech products
3. Inclusive design for wide audiences

Generation logic:

1. Builds a scale of perceived brightness
2. Base color is positioned where its brightness fits best
3. Shades are calibrated for target contrast
4. 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
5. Youtube

⚙️ UINDER YHE HOOD

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

🚧 STATUS

This plugin is in beta. We welcome feedback and are actively improving it.