Figma Variables
Push any palette to Figma Variables in one click. Flat colors or 50 to 950 shade scales, ready for your design system.
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.
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
Accessibility lens
Check WCAG 2.2 contrast on every color pair. Preview through five color vision types 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.
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 or Tailwind anytime.
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.
Built by Andres Clavijo · Clavijo Studios LLC