paletta

COMPARISON

Paletta vs tweakcn

tweakcn is a focused, open-source visual editor for shadcn/ui themes: adjust colors, fonts, radius, and shadows with a live component preview, then copy the CSS into globals.css. Paletta starts one step earlier, generating shade scales and roles from a single seed color, and adds APCA alongside WCAG, DTCG export, and Figma Variables push.

Last checked against both products 2026-10-07

FeaturePalettatweakcn
Live previewCommon UI patternsshadcn components
Shade scales and roles from one seed color✓Not included
oklch() values in the exported CSSNo (hex and HSL)✓
shadcn/ui CSS variable exportPro✓
Tailwind v4 export✓✓
WCAG contrast checkAcross the system, AAA to Below AAAA threshold, in a dialog
APCA contrast✓Not included
AI generation3 a day free, unlimited with Pro5 free, unlimited with Pro
W3C DTCG token exportProNot included
FigmaPushes Figma VariablesVia a partner UI kit
Fonts, radius, and shadowsNot included✓
Theme preset galleryCurated gallery✓
Open source and self-hostableNot included✓

Where Paletta wins

  • Full shade scales and roles from a single seed color, not only shadcn variable editing.
  • WCAG 2.2 and APCA checked across the system as you generate, with AAA, AA, and AA Large verdicts.
  • Figma Variables push and W3C DTCG export alongside the Tailwind v4 and shadcn output.
  • The color you pick stays exact at step 500 of its scale.

Where tweakcn wins

  • Open source under Apache 2.0 and self-hostable.
  • Purpose-built for shadcn: every control maps to a shadcn CSS variable, with a live component preview.
  • Edits the whole theme, including fonts, radius, and shadows, not only color.
  • A large community preset gallery specific to shadcn projects.

Moving a palette from tweakcn

A tweakcn theme is already a shadcn-ready CSS variable block. Enter its primary color into Paletta as a seed to build full shade scales around it, check WCAG and APCA contrast, and push the result to Figma Variables.

Frequently asked questions

The editor, CSS export, and contrast checker are free, and the project is open source under Apache 2.0. Pro is $8 per month and adds unlimited AI themes, themes from images, and unlimited saved themes.

Yes, with a contrast checker that tests its shadcn foreground and background pairs against the WCAG AA ratio of 4.5:1. It does not show APCA. Paletta checks WCAG 2.2 and APCA across the system as you generate and labels each pair AAA, AA, AA Large, or Below AA.

tweakcn's export is shadcn's CSS variable set plus a Tailwind v4 @theme inline mapping, so it works in any project that uses those variable names. It does not produce shade scales or W3C DTCG tokens. For those, enter the theme's primary color into Paletta as a seed.

If the project only needs shadcn theming, including fonts, radius, and shadows, tweakcn's focused editor is a fast, free option. If it also needs full shade scales, APCA alongside WCAG, DTCG tokens, or Figma Variables push, Paletta covers that wider surface.

Try Paletta on your own colors

Generate a validated token set, then export to Tailwind, shadcn, or Figma Variables.