Color systems built for production
Production design tokens.
From one color.
- 50 to 950 OKLCH scales from a single seed
- WCAG 2.2 and APCA validated on every contrast pair
- Tailwind, shadcn, DTCG, and Figma Variables export
Or pressspaceto randomize
Click a color to start a system
Sunset StudioWCAG 2.2 + APCA lens
:root {
--color-primary: oklch(0.54 0.247 293);
--color-secondary: oklch(0.66 0.212 354);
--color-accent: oklch(0.77 0.165 70);
--color-muted: oklch(0.70 0.149 162);
--color-background: oklch(0.68 0.148 237);
}Live preview
One color. Your whole product, retuned.
Pick a base color, watch Paletta retune every surface.
BASE·
bg: primary-50 · border: primary-100primary-500
Monthly revenue
$48,219
text: primary-900 +12.4% vs last mo.
badge: primary-100 / primary-700$8.2k
JANFEBMARAPRMAYJUNJUL
bg: primary-600 · fg: white
ONBOARDING · STEP 2
Export your first design system this week.
bg: surface · border: neutral-200
SYSTEM
All systems normal
APIprimary-50 / primary-700Webprimary-50 / primary-700Pluginprimary-50 / primary-700
Tokens
248
+18 this week
overlay: primary-700 → primary-800
"Paletta replaced our color brainstorm meetings."
Sora Mehta
Design lead, Northwind
EPISODE 14
Designing color systems that scale
28:14
bg: primary-900
--primary-500
#7C3AED
focus ring: primary-100COMPONENT · INPUT
Search projects…⌘K
button-primary: primary-600button-secondary: primary-50
SETTINGS
Weekly digest
Net new tokens
$15,989
$18,871 last period
Shades
Shade scales
Perceptually uniform 11-step scales tuned in OKLCH.
Primary
50 to 950
#F6F0FF
#DACFFF
#C1ACFF
#A987FF
#9262FF
#7C3AED
#651DCA
#4D00A3
#360078
#20004F
#0D002A
Secondary
50 to 950
#FFEAF7
#FFCDE3
#FFACD1
#FF89BE
#FB68AC
#EC4899
#C32779
#98065A
#6B003D
#420021
#1C0009
Accent
50 to 950
#FFF2DE
#FFE2BF
#FFD199
#FFBF6F
#FDAE45
#F59E0B
#C77700
#985400
#693500
#3D1800
#160100
MutedPRO
Accessibility
Accessibility lens
Paletta checks every pair against WCAG 2.2 before production.
Aa
Primary on Background
Contrast 16.34 : 1AAA
Aa
Secondary on Background
Contrast 7.57 : 1AAA
Aa
Accent on Surface
Contrast 4.60 : 1AA
Aa
Primary on Muted
Contrast 6.12 : 1AA
Aa
Background on Primary
Contrast 2.43 : 1Below AA
Aa
Accent on Primary
Contrast 2.99 : 1Below AA
Export
Export to any stack
Copy production tokens to Tailwind, shadcn, or Figma variables.
:root {
--color-primary: #7C3AED;
--color-secondary: #EC4899;
--color-accent: #F59E0B;
--color-muted: #10B981;
--color-background: #0EA5E9;
}Synced. Last export 4s ago
Or sync directly to Figma Variables. Install plugin
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
POPULARFor 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
Ready to build your color system?
Free forever, no credit card, Pro when you need more.