Design Token Extractor

Extract color palettes, typography, and design tokens from any website with one click. Supports multi-format export.

Design Token Extractor — The fastest way to capture a website's design language directly from your browser. Whether you're reverse-engineering a design system, auditing a competitor's brand palette, or syncing a live site's styles into Figma — this extension does it all with a single click. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎨 ONE-CLICK COLOR PALETTE EXTRACTION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Instantly scan up to 3,000 DOM elements on any webpage. Colors are extracted from computed CSS properties (background, text, borders, outlines) and intelligently clustered using the CIE Lab ΔE perceptual color distance algorithm — the same science used in professional color management. Extracted colors are automatically sorted into design token categories: • Primary Colors — dominant brand colors • Secondary Colors — supporting palette shades • Accent Colors — highlight and interactive colors • Background Colors — light neutrals and surfaces • Text Colors — dark tones used for readability • Other — additional chromatic values Click any color swatch to instantly copy in your preferred format: ✅ HEX (e.g. #3b82f6) ✅ RGB (e.g. rgb(59, 130, 246)) ✅ Tailwind CSS class (e.g. blue-500) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔤 TYPOGRAPHY SCANNER & HOVER INSPECTOR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Two powerful ways to capture font data: ① Font Scanner — scans up to 2,000 elements and lists every unique font combination found on the page, ranked by usage frequency. Each entry shows: • Font Family • Font Size • Font Weight • Line Height • Letter Spacing ② Live Hover Inspector — enables a real-time tooltip overlay. Move your cursor over any text on the page to instantly see its full typography details in a floating card. Click to pin that font to your panel for export. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📦 EXPORT TO YOUR WORKFLOW ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Export all captured tokens in three industry-standard formats: 🔷 Figma Tokens JSON Compatible with the Tokens Studio for Figma plugin. Includes color and typography tokens in the correct schema for seamless import into your Figma design system. 🔷 Flat JSON Tokens A clean key-value structure (color-primary-01, font-01, etc.) ready for use in any front-end design system, style dictionary, or build pipeline. 🔷 CSS Custom Properties Generates a ready-to-paste :root { } block with all color and typography variables. Drop it directly into your stylesheet. Each format supports: • 📋 Copy to clipboard • ⬇️ Download as file • 👁️ Inline preview ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📌 POPUP OR SIDE PANEL — YOUR CHOICE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Switch between two view modes to fit your workflow: • Popup Window — quick access, opens on click • Chrome Side Panel — keeps the panel open alongside the page for continuous inspection ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🌐 10 LANGUAGES SUPPORTED ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ The full UI is available in: English · 繁體中文 · 简体中文 · 日本語 · 한국어 · Español · Deutsch · Français · Português · Tiếng Việt ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔒 PRIVACY & PERMISSIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • No data is sent to any server — all processing happens locally in your browser • Only reads computed CSS styles; never modifies page content • Clipboard access is used only when you click "Copy" • Storage is used to remember your language and display mode preference Required permissions: activeTab, scripting, storage, clipboardWrite, sidePanel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 👩‍💻 PERFECT FOR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • UI/UX Designers building or auditing design systems • Front-end developers extracting tokens from live sites • Design agencies reverse-engineering client brand guides • Anyone who wants to copy a website's color palette instantly Design Token Extractor 是一款強大的 Chrome 擴充功能，讓你一鍵從任何網站提取設計 Token。 🎨 主要功能： • 提取顏色色盤（HEX、RGB、HSL） • 擷取字型樣式（字型族、大小、粗細、行高） • 識別間距、陰影、邊框半徑等設計 Token • 支援 Side Panel 側邊欄及 Popup 彈出視窗兩種模式 • 多格式匯出：CSS Variables、JSON、Tailwind Config、SCSS 💡 適合對象： • UI/UX 設計師進行設計稽核 • 前端開發者快速取得設計規格 • 設計系統建構者整合 Token 🌐 支援所有網站，無需額外設定，即裝即用。