01
Pick Color
Pick colors directly from webpages in HEX, RGB, or HSL.
Chrome color picker for design tokens
Pick colors from websites.Ship usable tokens.
TokenTint is a Chrome extension that captures colors from any webpage, saves them to project palettes, and exports CSS Variables, Tailwind Config, or W3C Design Tokens.
●No account required · Free features work offline
FREE FOR OCCASIONAL WORK
Pick → Review → Save
For designers and developers who need to collect a few colors while browsing and keep them ready for the next task.
02
Review History
Keep the last 20 colors together instead of losing them in copied notes.
03
Save to Project
Build one reusable project palette and export CSS Variables when ready.
PRO FOR REPEATED WORK
Extract → Organize → Export
For competitor research, brand work, and design token workflows: scan pages faster, manage multiple palettes, and hand code-ready color tokens to development.
Pro · $15 one-time purchase
01
Extract Colors
Extract key colors from a webpage instead of picking them one by one.
02
Organize Projects
Keep separate palettes for different sites, brands, and products.
03
Export Tokens
Export CSS Variables, Tailwind Config, or W3C Design Tokens for your codebase.
FROM COLOR TO CODE
See the output before you upgrade.
Capture colors from a real interface, then take a project palette into the format your codebase already uses.
CSS VariablesTokenTint export
:root {
--color-brand: #635BFF;
--color-surface: #F7F8FB;
--color-text: #10131A;
}CHOOSE YOUR WORKFLOW
Start free. Upgrade when you need more.
Free
$0
- Pick colors from webpages
- HEX, RGB, and HSL formats
- Save colors to projects
- 20-color history
- CSS Variables export
Pro
$15 one-time
- Everything in Free
- Extract key colors from webpages
- Multiple project palettes
- Tailwind Config export
- W3C Design Tokens export