Bookmarklet — No Install Required

One click.
Any website.

Add PixelToToken to your bookmarks bar and extract design tokens from any page you're visiting — fonts, colors, spacing, shadows.

① Drag this button to your bookmarks bar

drag it up to your bookmarks bar

appears as → Pixel to Token

How to install

Show your bookmarks bar

Chrome: Ctrl+Shift+B (Win) or ⌘+Shift+B (Mac) · Firefox: View → Toolbars → Bookmarks · Safari: View → Show Favorites Bar

Drag the button above into your bookmarks bar

Grab the ◈ PixelToToken button and drag it up to your bookmarks bar. It will appear as a bookmark.

Visit any website and click it

Navigate to any page — a product you want to clone, a design system you like, any UI. Click the bookmark. Tokens appear instantly in a panel.

Export and use

Click any color to copy its hex. Export everything as Figma JSON, Tailwind config, or CSS variables. Click ✕ to close the panel.

◈

Colors

Up to 24 dominant colors extracted from the live DOM via computed styles.

Typography

Font families, sizes, weights, and line heights from every text node.

⊡

Spacing & Radii

Padding, margin, gap, and border-radius values across all visible elements.

◫

Shadows

Box-shadow values ready to copy or export to your design system.

Bookmarklet vs Chrome Extension