Tool · Tailwind → The Color Tools

Paste Tailwind. Get on-brand tokens.

Every bg-blue-600 becomes bg-primary. Every bg-zinc-50 becomes bg-background-subtle. Runs in your browser — your code never leaves the page.

Try a sample:

Tailwind in

17 classes parsed

The Color Tools out

9 rewritten

<section className="bg-background text-foreground p-12 rounded-xl shadow-lg">
  <h1 className="text-step-7 font-bold mb-3">Ship faster.</h1>
  <p className="text-foreground-muted mb-6">One token. Every framework. Zero rewrites.</p>
  <button className="bg-primary hover:bg-brand-700 text-primary-foreground font-semibold h-control-lg px-6 rounded-md">
    Get started
  </button>
</section>

Rewrites (9)

bg-white→bg-background
text-zinc-900→text-foreground
rounded-2xl→rounded-xl
text-4xl→text-step-7
text-zinc-600→text-foreground-muted
bg-blue-600→bg-primary
hover:bg-blue-700→hover:bg-brand-700
text-white→text-primary-foreground
h-11→h-control-lg

Converting a whole design system? Check out our editor & design-tool plugins. Batch URL / file conversion is on the roadmap — paste snippets for now.