Chameleon — Color Tokens
by Yevhen Peshynskyi (Ikstro)
Color token generator — shade scales, auto dark theme, Figma Variables export
Installs
174
Likes
49
Users
679
Views
764
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.
More import & export plugins plugins
View allhtml.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Paidby divRIOTS
Convert any website into fully editable Figma designs
Figma to HTML
by Figma2HTML
Convert Figma design to HTML
TinyImage Compressor
Paidby Hypermatic
Export/downsize compressed JPG, PNG, SVG, WebP, GIF, WebM, MP4, AVIF and PDF image files from Figma
Pitchdeck Presentation Studio
Paidby Hypermatic
Turn your Figma designs into animated slide decks or export them to PowerPoint/PDF