Live in Figma Community

Paletta for Figma

Generate OKLCH palettes, check WCAG contrast, and push to Figma Variables in one click. Export production code without leaving your file.

Install from Figma Community Open Studio

Free · Works with Figma Variables · v1.0

primary#1A1A2E

secondary#6C47FF

accent#0052FF

surface#FAFAF8

muted#888780

:root {
  --primary: oklch(0.18 0.04 264);
  --accent:  oklch(0.50 0.25 264);
  --surface: oklch(0.98 0.005 90);
}

Made for production design systems

Figma Variables

Push any palette to Figma Variables in one click. Base colors are free. Shade scales (50 to 950) are a Pro feature.

Accessibility lens

Check WCAG 2.2 contrast on every color pair. Preview through three color vision types free, five with Pro, without leaving Figma.

OKLCH shade scales

Perceptually even shade scales with predictable lightness. No HSL hue shift, no Sass darken() drift. OKLCH keeps perceived lightness consistent across hues, so your 500 reads like a 500 whether it's blue, red, or yellow. A Pro feature in the plugin.

How it works

From prompt to production tokens in three steps.

Generate a palette

Prompt or random. Five colors, semantically named.

primary

secondary

accent

surface

muted

Check contrast

WCAG 2.2 verdicts on every color pair. APCA as a perceptual lens.

primary / surfaceAA 6.5

accent / surfaceAAA 10.6

muted / surfaceAA 4.7

Push to Figma Variables

Variables panel updates instantly. Export CSS free, Tailwind with Pro.

primaryoklch(0.18 0.04 264)

accentoklch(0.50 0.25 264)

surfaceoklch(0.98 0.005 90)

24 variables synced

Build faster with Paletta

Install the plugin, then use Studio anywhere you need the full system.

Install from Figma Community Open Studio

Built by Andres Clavijo · Clavijo Studios LLC