Free bookmarklet · No extension, no account

Extract design
tokens from
anywhere.

Click it on any website to pull out its colors, fonts, spacing, radii and shadows. Export them as CSS variables, Tailwind, Figma JSON, Markdown or a Brand PDF.

Runs entirely in your browser
No page data sent anywhere
Chrome, Firefox, Safari, Edge

Bookmarklet v1.1.0

① Drag this button to your bookmarks bar

Pixel to Token

drag it up to your bookmarks bar

appears as →

Pixel to Token

See it in action

Open any site, click Pixel to Token in your bookmarks bar, and a panel lists every token the page uses. Nothing to sign up for.

Try it: switch tabs, click a token to copy it, or pick an export format to see its output below. Sample data, same panel.

pixeltotoken.css

/* PixelToToken — Design Tokens */
:root {
  --color-blue-dark: #1d1b2e;
  --color-blue-02: #2f4bd8;
  --color-red-03: #e2603b;
  --color-surface-white: #fbf7f2;
  --font-syne-family: Syne, sans-serif;
  --font-syne-size: 26px;
  --font-syne-weight: 800;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-shadow-1: rgba(47, 75, 216, 0.28) 0px 4px 12px 0px;
}

pixeltotoken.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: { extend: {
    "colors": {
        "blue-dark": "#1d1b2e",
        "blue-02": "#2f4bd8",
        "red-03": "#e2603b",
        "surface-white": "#fbf7f2"
    },
    "fontFamily": {
        "syne": ["Syne"],
        "dm-sans": ["DM Sans"]
    },
    "spacing": { "sm": "12px", "md": "16px" },
    "borderRadius": { "sm": "8px", "md": "12px" }
  } }
};

pixeltotoken-tokens.json

{
  "colors": {
    "blue-02": {
      "$value": { "r": 0.1843, "g": 0.2941, "b": 0.8471, "a": 1 },
      "$type": "color"
    }
  },
  "typography": {
    "syne-family": { "$value": "Syne", "$type": "fontFamily" },
    "syne-size": { "$value": "26px", "$type": "fontSize" }
  },
  "spacing": {
    "md": { "$value": "16px", "$type": "spacing" }
  }
}

pixeltotoken-readme.md

# PixelToToken Export

Source: example.com

## Colors

| Name | Hex | Role | Contrast White | Contrast Black | CSS Variable |
| --- | --- | --- | ---: | ---: | --- |
| blue-dark | #1D1B2E | text | 16.82 | 1.25 | |
| blue-02 | #2F4BD8 | accent | 6.73 | 3.12 | |
| red-03 | #E2603B | accent | 3.52 | 5.97 | |

## Spacing

| Name | Value | Rem |
| --- | ---: | ---: |
| sm | 12px | 0.75rem |
| md | 16px | 1rem |

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. Chrome does not reliably preserve favicons for javascript: bookmarklets. If Chrome creates an unlabeled bookmark, right-click it, choose Edit, and set the name to Pixel to Token.

Visit any website and click it

Open any page: a site you're redesigning, a design system you admire, your own product. Click the bookmark and the tokens appear in a panel. A few sites with strict security settings block bookmarklets, so if nothing happens, that's why.

Export and use

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

What you get

◈

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.

What happens when you click it

A bookmarklet is a small script saved as a bookmark. Here's exactly what this one does.

Reads styles, nothing else

It reads the computed CSS of the page you're on. It doesn't touch forms, cookies or passwords.

Stays on your device

Tokens are worked out in your browser. No page data is sent to us or anyone else, and there's no tracking.

Code you can read

The bookmark loads one script. View the source before you install.

Bookmarklet vs Chrome Extension

Bookmarklet

No store approval needed
Works in Chrome, Firefox, Safari, Edge
Install in 10 seconds
Full token extraction (colors, fonts, spacing, shadows)
Updates automatically

Chrome Extension

Requires Chrome Web Store approval
Chrome & Edge only
Persistent toolbar button
Can capture full-page screenshots
Works on restricted pages (new tab, chrome://)