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.

What is the tailwind to color tools?

Paste a Tailwind config or a set of Tailwind class names and get the actual colors back as a palette with HEX, RGB, CMYK and Pantone references, ready to hand to a designer or printer.

Turning Tailwind classes into real color values

Developers think in class names; designers and printers need values. The tool resolves any Tailwind color class (bg-indigo-600, text-zinc-400, custom names from your config) to its HEX and shows the full record for each, then exports the set as a palette, ASE swatches or a brand kit. Custom configs are parsed in the browser.

Tailwind to Color Tools FAQ

Can I convert a tailwind.config.js color palette to HEX?

Yes. Paste the colors object from your config and every entry resolves to HEX, RGB, HSL, CMYK and a nearest Pantone reference.

Does it support Tailwind v4 @theme variables?

Yes. Paste the @theme block and the OKLCH values are converted the same way.

Related color tools