01TokenTint
Open the reference page
Start with a real interface whose colors you want to bring into a Tailwind project.
Explore workflowTokenTint for frontend workflows ●
Tailwind-ready Palette Generator
Collect colors from a webpage, organize them into a practical project palette, and export a Tailwind Config starting point—without inventing automatic 50–950 shades.
✓ Free forever · No credit card required
A calmer way to build color systems
01 / Capture02 / Organize03 / Ship
The problem
Tailwind projects often start from colors found in a browser mockup, a competitor site, or an existing product. Copying disconnected HEX values into a config makes it hard to compare the palette and easy to lose the source context.
How TokenTint solves it
TokenTint helps you collect and organize the colors that already exist in the interface. Pro then exports those project colors as a Tailwind Config starting point; you can add semantic names, shades, and project conventions in your own codebase.
A better color workflow
From webpage colors to a Tailwind-ready palette.
- 01 / COLLECTCollect.Pick the brand, surface, text, border, and accent colors you need from a webpage.
- 02 / ORGANIZEOrganize.Keep the values together in a TokenTint project palette and verify the formats before exporting.
- 03 / EXPORTExport.Download a Tailwind Config starting point and continue the naming and scale decisions in your codebase.
Pro workflow
Tailwind workflow: Open → Extract → Organize → Export
Reuse the reference colors, organize them in a project, and carry the selected palette into a Tailwind Config starting point.
02TokenTint
Extract webpage colors
Scan the active page for a broader starting palette instead of picking every color one by one.
Explore workflow03TokenTint
Organize the project palette
Keep colors together in the selected project and choose the values that belong in the Tailwind theme.
Explore workflow04TokenTint
Export Tailwind Config
Download a config-ready color object and refine names, shades, and conventions in your codebase.
Explore workflowTAILWIND CONFIG
Export the palette you collected—not a made-up scale.
The export gives your codebase a config-ready starting point. You remain in control of semantic names, shade scales, and how the palette fits your project.
TokenTint export
theme: {
extend: {
colors: {
brand: '#635BFF',
surface: '#F7F8FB',
ink: '#10131A'
}
}
}Free vs Pro
Free
- Pick colors from webpages
- HEX, RGB, and HSL formats
- 20-color history
- Single project palette
- CSS Variables export
Pro
- Everything in Free
- Key page color extraction
- Multiple project palettes
- Tailwind Config export
- W3C Design Tokens export
Why TokenTint instead of a basic color picker? it preserves the relationship between your reference webpage and the colors you bring into Tailwind, while leaving semantic naming and shade design decisions under your control.
Local-firstColors and projects stay in Chrome local storage.
Limited analyticsThe website records only defined interaction events.
One-time ProNo subscription; 30-day refund policy.
Frequently asked questions
How do I export website colors to Tailwind?
Collect the colors from the active webpage, organize the useful values in a TokenTint project, and use Pro to export a Tailwind Config starting point.
Can I create a Tailwind config from an existing website palette?
Yes. TokenTint exports the colors you collected as a config-ready color object. You can then refine names, shades, and semantic roles in your codebase.
Does TokenTint generate 50–950 color shades?
No. TokenTint does not promise automatic 50–950 shade generation. The export reflects the colors you collected, and you can define shades and semantic names in your project.
Is Tailwind Config export free?
Tailwind Config export is a Pro feature. Free users can still pick colors, organize one project palette, and export CSS Variables.