Paletta: OKLCH palettes to Figma Variables
OKLCH shade scales, WCAG contrast, and one-click push to Figma Variables.
Plugin Preview
About this plugin
Generate OKLCH shade scales, check WCAG contrast, and push them straight to Figma Variables, or export as CSS variables, Tailwind v4 @theme, or DTCG tokens.Why Paletta?🎨 Smart Generation: AI prompts ("muted Nordic winter") or 4 harmony modes (Analogous, Monochromatic, Complementary, Triadic). Shades generated in OKLCH for perceptually uniform steps.🛠 Clean Variables: Map colors to semantic roles (Primary, Secondary, Accent, Neutral, Semantic) without polluting your file.👁 Accessibility Lens: Real-time WCAG 2.2 contrast checks, APCA perceptual scores, and vision simulation across 4 deficiency types (Protanopia, Deuteranopia, Tritanopia, Achromatopsia).💻 Dev-Ready Handoff: One-click export as CSS custom properties, Tailwind v4 @theme, or DTCG tokens (2025.10 format, or hex values for Style Dictionary v4 and Tokens Studio).📦 Full Shade Scales: 50 to 950, 11 steps per color, generated in OKLCH.☁ Synced Library: Saved palettes and systems sync with your Paletta web account and follow you across devices.The workflow:1. Seed: Type a hex, extract from an image, or prompt the AI.2. Refine: Lock the colors you like, regenerate the rest.3. Validate: Turn on the Accessibility Lens to check WCAG contrast and simulate vision deficiencies.4. Export: Push to Figma Variables or copy the code.Free features:5-color palettes, locking, WCAG contrast checks, CSS export, Accessibility Lens (Protanopia and Deuteranopia), 3 saved palettes, 3 AI prompts per day.Paletta Pro ($9/month or $79/year at usepaletta.io):Unlimited AI prompts and saves, 6 to 8 color palettes, full shade scales in Figma Variables, light and dark variable modes, Tailwind and DTCG export, all Accessibility Lens modes, image extraction.Note: Pro is billed separately at usepaletta.io. The plugin is free to install.Built for designers who ship. Feedback? [email protected] more → usepaletta.io
Plugin Details
| Version | 14 |
|---|---|
| Created | March 27, 2026 |
| Last Updated | September 30, 2026 |
| Category | Accessibility tools |
| Creator | Andres Clavijo |
| Stats | 6 installs, 3 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Network Access:
AI palette generation, user authentication, Pro subscription, and anonymous usage counts via Paletta API
- Editor Types:figma
- Allowed Domains:
- https://usepaletta.io
More Like This
Discover other plugins in the Accessibility tools category.