Paletta

From one color to production design tokens: OKLCH scales checked against WCAG and APCA, synced to Figma Variables and exported for Tailwind.

Open Paletta

Role: Designer and Builder
Timeline: 2026
Status: Live: www.usepaletta.io
Built with: React 19
TypeScript
Vite
Tailwind
shadcn/ui
Zustand
Supabase
Stripe
Vercel
chroma-js
Vike
Claude API

One color in, a token system out

Paletta turns one color into production design tokens. It builds the full 50 to 950 system in OKLCH, checks every pair against WCAG 2.2 with APCA alongside, and pushes the result to Figma Variables and the codebase: CSS, Tailwind v4, shadcn/ui, W3C DTCG JSON, Swift and Kotlin. It is built for designers and frontend engineers who need to move from inspiration to production without losing anything in the handoff.

Hours lost to shade scales

I kept hitting the same break point. Pick a palette, then spend hours building shade scales by hand, checking contrast in a separate tool, formatting tokens for engineers, and redoing all of it when one color changed. Tools like Coolors solve inspiration. They do not solve shipping.

I wanted one place to go from a single color to a production-ready system, with no manual translation layer between design and engineering. So I built it.

Paletta is also proof of something I care about: a designer can own the full loop, from spotting the problem to shipping the product.

Diagram of the old workflow as a chain: a palette app, then WebAIM for contrast, then hand-written Tailwind, then repeat the whole thing whenever a color changes. — The workflow Paletta replaces: four tools, redone from scratch every time a color changed.

Positioning matrix plotting consumer against professional and inspiration against production. Adobe Color, Coolors, Huemint and Realtime Colors sit lower, with Paletta alone in the production-ready professional quadrant. — Where Paletta sits: the only tool aimed at professionals who need production-ready color.

Why color systems are hard

Color systems look simple from the outside. In practice they involve generating perceptually balanced shade scales, validating contrast ratios across every combination, simulating how the palette reads under different color vision deficiencies, and exporting tokens in formats engineers can actually use. Most teams solve this by stitching together three or four separate tools and a lot of manual work in between.

The handoff kept breaking. Especially at scale. Especially when something changed upstream and every downstream step had to be redone.

The Vercel deployments dashboard listing successive production builds of Paletta, each ready and tied to a commit on main. — Production deploys of Paletta, each tied to a commit.

Who else does this

I mapped the competitors before writing a line of code. Coolors owns inspiration with 8 million users and a ten-year community lead, so competing there is a losing play. Adobe Color locks you into Creative Cloud. Huemint is AI-first but light on exports. Realtime Colors shows live previews but has no WCAG validation or shade-scale generation.

Nobody owned the professional designer-to-frontend pipeline, the segment that needs palettes ready for production. The stakes also went up. Specify, a funded design-tokens platform, shut down. The EU’s European Accessibility Act is now in force, which turns accessible color from a nice-to-have into a legal requirement for anyone selling into Europe. That is exactly where Paletta sits.

The Paletta Pro upgrade modal: unlimited AI prompts, 6 to 8 color palettes, image extraction, the full five-mode accessibility lens, color systems, 50 to 950 shade scales and Tailwind export, at 9 dollars a month or 27% less yearly. — The Pro upgrade: unlimited AI prompts, image extraction and the full color system.

Free tier and Pro

Free forever, no card to start: 3 AI generations a day, CSS and Tailwind v4 export, and WCAG validation. Pro at $9/mo or $79/yr, a 27% saving on the annual plan, adds unlimited generations, the full system output, every export format, image extraction and the Figma Variables push for shade scales and modes. Cost to serve is close to zero: static hosting on Vercel, a thin Supabase backend, and Claude Haiku for the AI at a low cost per generation.

Margins are strong, and the pricing is aimed at the individual designer, not gated behind enterprise sales, because the wedge is the solo designer who brings a team along later.

The three-layer CSS variable source on the left beside the running app and its exported Tailwind config on a phone, showing tokens moving from definition to production. — Tokens from definition to production: the CSS variable source, the running app and the exported Tailwind config.

Tokens in three layers

Paletta runs on a 3-layer CSS variable architecture. Variables are the single source of truth, Tailwind maps them to utilities, components only consume tokens. Change one variable and every surface updates. No hardcoded hex anywhere.

Radii run at five levels (24, 16, 12, 8, 6px) with an inner-radius formula, R_inner equals R_outer minus padding. The same tokens sync to a Figma file so design and code stay in one language. I documented all of it as a canonical spec that every change has to comply with. Same systems thinking I bring to a design org, turned on my own product.

A Finder window listing the eight agent definition files, from design system architect through to micro-interactions designer, alongside the manifesto that governs them. — The virtual product team: eight agent definitions and the manifesto that governs them.

Eight agents, one product

I build Paletta with a virtual product team: 8 specialized Claude Code agents, each with a defined jurisdiction and a relationship to the others. Writing a UI component triggers the design-system agent for token compliance and the frontend agent for architecture review. It is organizational design applied to a solo build. One person, structured like a team.

Paletta’s Color Systems view with the accessibility lens open: normal vision plus protanopia, deuteranopia, tritanopia and achromatopsia previews, beside scales whose steps are marked for WCAG 2.2 body or large text. — The accessibility lens: the same system seen through four kinds of color blindness, with each step marked for WCAG.

The stack

React 19, TypeScript, Vite, Tailwind, shadcn/ui, Zustand for state, Supabase, Stripe, Vercel, chroma-js for the color math, Vike for SSG. AI features run on the Claude API (Haiku). I write it with Claude Code as my engineering partner, which is how one designer ships and maintains a full product without a team.

What’s live

Everything below is shipped and running at usepaletta.io:

AI palette generation, 3 a day on the free plan and unlimited on Pro
Full 50 to 950 shade scales in OKLCH, with secondary, accent and neutral roles and light and dark surfaces
WCAG 2.2 contrast validation on every pair, with APCA as a perceptual lens alongside
A five-mode accessibility lens for color-vision simulation
Image extraction, pulling a palette from a photo
Export to CSS variables and Tailwind v4, plus shadcn/ui, W3C DTCG JSON, Figma Variables JSON, Swift and Kotlin on Pro
A prompt export that applies the system in v0, Lovable or Bolt
A Figma plugin that pushes the system into real Figma Variables, as collections and modes
Live preview on real UI mockups
A saved library of systems
Paletta runs in English and Spanish
Free plan and Pro billing on Stripe
PostHog analytics running end to end

Distribution runs through the Figma plugin as top-of-funnel, a build-in-public series on dev.to, and Reddit and X. The product is fully built and functional; the public launch push hasn’t started yet.

The Paletta homepage: “From one color to production tokens.”, with Generate system and Install Figma plugin. — The homepage: from one color to production tokens.

Paletta’s palette generator: five colors as full-height columns, each with its hex, name and contrast scores against white and black. — The generator: each color with its contrast against white and black, visible from the start.

The generator with its contrast pairs section below: every foreground and background pair scored against WCAG 2.2, filterable by AAA, AA and below AA. — Every color pair scored against WCAG 2.2 and filterable by level.

Try it

A simplified version of what Paletta does: one color in, a perceptual scale out, every step checked for contrast. The real thing handles vision simulation, exports and Figma sync.

#0066FF

Ratios are against this panel's background. Steps that clear WCAG AA for body text are marked ★.Open Paletta