Chromatic

About this plugin

Chromatic turns your brand colors into a complete, production-ready color system — without the spreadsheet.Pick a Primary and Secondary color, and Chromatic generates a full 10-shade scale (50–900) for each using OKLCH — the same perceptual color model behind Tailwind v3 and Radix UI. The result: lights that stay airy, mids that stay vivid, and darks that stay rich. Not the muddy HSL output you've learned to work around.On top of the raw scale, Chromatic generates a complete semantic token layer — Fill, Fill-Hover, Tint, Border, On-Tint — mapped correctly for both light and dark mode. A brand-tinted Neutral is auto-derived from your primary hue. Success, Warning, and Error system colors are included too. Every token lands in your Figma styles panel, organized into named groups.When you're ready to ship, hit Copy Tokens to export a structured JSON file with reference-based tokens ({Primitive.Primary.500}) ready to drop straight into Tokens Studio, Style Dictionary, or any W3C-compatible token pipeline.What you get:— 10-shade OKLCH scales for Primary, Secondary, Neutral, Success, Warning, and Error— Semantic tokens for Light and Dark mode— Named, grouped Figma paint styles (auto-updated on re-run)— JSON token export with proper references— Live swatch preview before you apply anything