paletta
Live in Figma Community

The production layer between Figma
and shipped code.

Generate in OKLCH. Validate against WCAG 2.2 and APCA. Push to Figma Variables, export to Tailwind, shadcn, and DTCG. For design systems leads who ship to code, not mood boards.

Install Figma pluginFREE

Free forever, no signup

WCAG 2.2 + APCA
on every pair
50 to 950
OKLCH design tokens
Accessibility lens
built into creation
Live preview

One color in. A validated system out.

Pick a base color. Paletta builds the full 50 to 950 scale, validates every pair, and pushes real Variables to Figma.

Base
Primary, 50 to 950
50
100
200
300
400
500
600
700
800
900
950
900 on 5016.03:1WCAG AAA
fg on 6008.13:1WCAG AAA
500 on 9503.51:1Below AA

WCAG 2.2 is the conformance verdict. APCA Lc is a perceptual lens.

Paletta60 variables
primary/500#7C3AED
primary/900#20004F
secondary#B862C5
accent#5566D2
surface/50#F7F7F8
Created 55 shade variables, 5 roles, 50 to 950

A live preview of the Variables Paletta pushes to Figma from your base color.

Validated on every pair. Pushed to Figma Variables.
How it works

The whole path, from base color to code

One base color becomes a validated OKLCH scale, real Figma Variables, and code tokens, from a single source.

#7C3AED
OKLCH
01Generate

From one base color

An OKLCH scale, 50 to 950, perceptually even.

Aa900 on 5016.0AAA
Aafg on 6008.1AA
Aa500 on 9503.5Below AA
WCAG 2.2
02Validate

Every pair, WCAG 2.2

Contrast checked as you build, with an APCA lens.

ApprovedRejected
ApprovedRejected
Normal
Deuteranopia
03Accessibility lens

See it as others do

Preview the system through vision differences.

Variables60 variables
primary/500#7C3AED
primary/900#20004F
secondary#B862C5
one click
04Push to Figma

Real Variables, one click

Roles and 50 to 950, as Figma Variables.

CSSTailwindDTCG
1:root {
2  --primary-500: #7C3AED;
3  --primary-600: #6D28D9;
4}
Copied
05Export

Into your codebase

Tailwind, shadcn, CSS variables, and DTCG.

base
06Maintain

Change the base once

Update it and the whole system follows.

Install the Figma plugin
Accessibility lens

See it through every kind of vision.

Paletta previews your system through color vision differences as you build, so the colors that carry meaning stay distinct for the people who rely on them.

Normalbaseline
Order status
ApprovedRejected
primary
secondary
accent
success
error
Color alone reads as status.
Protanopia
Order status
ApprovedRejected
primary
secondary
accent
success
error
Without labels, the status is lost.
Deuteranopia
Order status
ApprovedRejected
primary
secondary
accent
success
error
Without labels, the status is lost.

Simulated on the engine Paletta ships, validated against WCAG 2.2.

Pricing

Simple pricing, production tools

Start free. Go Pro when you’re ready to export.

Free

For getting started

$0forever
Start generating
  • 5-color palettes
  • 3 AI generations per day
  • Hex + CSS export
  • Basic contrast checker
  • Color System Generator (core)

Pro

POPULAR

For design and engineering teams in production

$6.58/mo · billed $79 yearly
Go Pro
  • Everything in Free
  • Shade scales 50 to 950
  • 6 to 10 colors per palette
  • Unlimited AI generations
  • Tailwind + shadcn export
  • Figma plugin
  • Accessibility Lens (all modes)
  • Full Color System exports
  • Unlimited saves, no watermark

Frequently asked questions

Ready to build your color system?

Free forever, no credit card, Pro when you need more.

Built by a product designer who ships to code.

Generate system See pricing