Back to Plugins
Chameleon — Color Tokens

Chameleon — Color Tokens

Color token generator — shade scales, auto dark theme, Figma Variables export

Plugin Preview

Chameleon — Color Tokens 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

Version5
CreatedMay 2, 2025
Last UpdatedJune 4, 2026
CategoryImport & export plugins
CreatorYevhen Peshynskyi (Ikstro)
Stats164 installs, 49 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none