Chameleon — Color Tokens
Color token generator — shade scales, auto dark theme, Figma Variables export
Plugin Preview
About this plugin
🦎 CHAMELEON — Color TokensChameleon is a Figma plugin that makes color token management effortless. Build smart palettes, structure your tokens, and export straight into native Figma Variables.🎨 KEY FEATURES🎨 Smart palette generation — harmonious color ramps from a single base color🧪 OKLab color engine — perceptually even steps, no muddy or duplicate shades🌒 Auto dark theme — instantly derive a dark version of every palette♿ A11Y mode — perceptual scale with predictable, strong contrast between shades🔒 Manual fine-tuning — lock any shade to a custom color and reshape the ramp by hand🧷 Figma Variables export — full support for collections, modes, and cross-collection aliases📤 JSON import/export — compatible with Figma Variables and Token Studio♻️ Load back — read existing Figma Variables into the plugin to keep editing✏️ Flexible structure — rename shades, palettes, collections, and modes while keeping links intact🧪 COLOR ENGINE (OKLab)Every shade is computed in the OKLab color space, which is perceptually uniform — so each step reads as an equal jump in brightness to the eye.• Steps are evenly spaced perceptually, not just numerically• A guaranteed minimum gap keeps neighbors distinct• The ramp stays strictly ordered light → dark, with no muddy or duplicate shades• Your base color is always kept exactly as entered🎨 BASE MODEBest for:• Aesthetic palettes without strict contrast rules• Branding and accent color systems• Visually balanced UIs with artistic controlGeneration logic:• Base color is placed at the center (shade 500)• Lighter (50–400) and darker (600–900) shades build out from it• Lightness and saturation adjust relative to the base♿ A11Y MODEPalettes built on a perceptual brightness scale for strong, predictable contrast between shades.Best for:• Interfaces that care about accessibility• Government, medical, education and fintech products• Inclusive design for wide audiencesGeneration logic:• Builds a scale of perceived brightness• Base color is positioned where its brightness fits best• Shades are calibrated toward a target contrast• Contrast between neighbors ≥ 1.3:1🔒 MANUAL MODETake manual control of any ramp when the algorithm isn't enough.Best for:• Pinning exact brand or accent values• Crafting a specific dark background (e.g. a soft gray, not pure black)• Fine-tuning individual steps without losing the rest of the rampHow it works:• Toggle Manual, then click a shade to set a custom color — this locks it• Locked shades (plus the two ramp ends) act as anchors; everything between re-flows around them• The base color is no longer a forced anchor, so you can reshape the whole scale freely• Locks are kept separately for light and dark themes• Reset a row anytime to return to the algorithmic ramp🌒 AUTO DARK THEMEInstantly generate perceptually balanced dark palettes from your light theme.How it works:• The lightness scale is flipped — shade 50 becomes the darkest, shade 900 the lightest• The base color stays at position 500 (in Base mode)• Lightness follows a perceptual OKLab scale, so steps read as even to the eye• Saturation is nudged up so dark shades stay rich, not muddy• Ordering is auto-corrected to keep the ramp clean (no duplicate or muddy steps)📌 HOW TO USE1. Create your base palettes in the "Global" tab (5 to 15 shades)2. Enable A11Y mode if needed, or use Manual mode to fine-tune shades by hand3. Switch between light and dark themes to evaluate the result4. Export everything to Figma Variables or JSONTip — for a clean re-import, keep the collection, theme, palette and shade names unchanged: import matches tokens by name, and renamed items come back as new entries instead of updating the old ones.⚙️ UNDER THE HOOD• OKLab-based ramp generation (perceptually uniform steps)• Edge lightness — Light: ~96% → 27%, Dark: ~20% → 92%• Automatic base-color positioning (especially in A11Y mode)• Built-in WCAG contrast checker• Base shade marked with a small dot (hidden once you hand-edit that shade)• Full support for Figma Variables & Token Studio structure🚧 STATUSThis plugin is in beta. We welcome feedback and are improving it actively.
Plugin Details
| Version | 5 |
|---|---|
| Created | May 2, 2025 |
| Last Updated | June 4, 2026 |
| Category | Import & export plugins |
| Creator | Yevhen Peshynskyi (Ikstro) |
| Stats | 164 installs, 49 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Import & export plugins category.
Free Compressed PDF and Image Exporter (PDF, PNG, JPG, WebP and SVG)
Export compressed PNG, PDF, JPG, SVG, WebP & merge multiple frames into one PDF—fast & easy! 🚀
Color Import / Export
Help design and dev teams stay in sync by providing import and export tools for color palettes
Export/Import Variables
Export variables from one file and import them to another. Supports modes, references, and scopes.