From one color to production tokens.
Pick one color. Paletta builds the full 50 to 950 system in OKLCH, checks every pair against WCAG 2.2 and APCA, and pushes it to Figma Variables and your codebase.
Install Figma pluginFree forever, no signup to try.
One color in, a full system out
Paletta builds 11 perceptually even steps in OKLCH, then derives secondary, accent and neutral roles from your base.
Try it with your colorFrom base color to code
Built for teams that run design systems.
Product designers and frontend teams use Paletta for everything between a brand color and production tokens.
Start from one brand color.
- Paste a hex or pick a preset
- Or start from a Figma style
- Randomize to explore
A full system in OKLCH.
- 11 steps from 50 to 950
- Secondary, accent and neutral
- Light and dark surfaces
Contrast you can defend.
- WCAG 2.2 on every pair
- APCA Lc alongside
- Accessibility lens preview
Figma and code, one source.
- Push to Figma Variables
- Tailwind, shadcn and CSS
- DTCG design tokens
One system, every place it lives.
The plugin writes collections and modes into your file, so designers use the same tokens engineers export.
Drop the output into tailwind.config or globals.css. Names follow the conventions your stack already uses.
Standard W3C token JSON for Style Dictionary and every pipeline that reads it.
Pricing
Simple pricing, production tools
Start free with CSS and Tailwind export. Go Pro for the full system.
Free
For getting started
$0forever
No card to start
Start generating- 3 to 5 colors per palette
- 3 AI generations per day
- CSS variables and Tailwind v4 export, on the web and in the Figma plugin
- 3 saves to Library
- WCAG contrast validation
Pro
POPULARFor design and engineering teams in production
$6.58/mo
Billed $79 yearlySave 27%
Go Pro- Everything in Free
- Full system output: state colors and hue-tinted neutrals
- shadcn/ui, DTCG, Figma Variables JSON, Swift and Kotlin export
- 6 to 8 colors per palette
- Unlimited AI generations
- Shade scales and light and dark modes pushed to Figma Variables
- Image extraction
- Accessibility lens (all five modes)
- Unlimited saves, no watermark
Free forever, no card to start. You generate OKLCH palettes, export CSS variables and Tailwind, validate contrast against WCAG 2.2, and preview the accessibility lens. Go Pro when you need the full system output.
Figma Variables store your colors, but they will not build a perceptually even 50 to 950 scale in OKLCH, validate every pair against WCAG 2.2, or generate your code tokens. Paletta does all three, then pushes the result into Figma as real Variables in one click.
Free exports CSS variables and Tailwind. Pro adds shadcn/ui, W3C DTCG JSON, Figma Variables JSON, Swift and Kotlin constants, and a prompt that applies the system in v0, Lovable or Bolt, so one system reaches every surface you ship to.
Every color pair is validated against WCAG 2.2 as you build, and the accessibility lens previews your palette through different kinds of color vision. APCA is included as a perceptual lens, not a separate conformance claim.
Only to save to your Library. Generating, validating, and exporting all work without one.
The full system output with state colors and hue-tinted neutrals, plus shadcn, DTCG, Figma Variables JSON, and Swift and Kotlin exports. Unlimited generations and saves, image extraction, and the full five-mode accessibility lens.
Your next color system starts with one hex.
Free forever, no credit card required.