Skip to content
Paletta: OKLCH palettes to Figma Variables

Paletta: OKLCH palettes to Figma Variables

by Andres Clavijo

OKLCH shade scales, WCAG contrast, and one-click push to Figma Variables.

FreeFigma

Installs

6

Likes

3

Users

21

Views

69

Preview

Paletta: OKLCH palettes to Figma Variables 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? hello@usepaletta.ioLearn more → usepaletta.io

More accessibility tools plugins

View all