Design Inspector Pro

About

Design Inspector Pro is a powerful developer and designer tool that injects a real-time inspection panel into any webpage — no DevTools required.
🎨 Pixel-Perfect Color Picker
Hover over any pixel to see its exact Hex, RGB, and HSL values with an 11×11 magnified zoom lens. Click to copy instantly.
🔤 Typography Inspector
Instantly reveal font family, size, weight, line-height, and letter-spacing of any text element on the page.
</> CSS Extractor
Extract computed CSS properties including display, position, flexbox/grid, padding, margin, borders, and shadows — then export as CSS, JSON, or Design Tokens.
🎯 Smart Element Locking
Hover to preview any element live, click to lock the panel. Press Esc to release and move on.
🧩 Full-Page Palette Scanner
Crawls every element on the page and extracts all unique colors into a clean, copyable swatch grid.
🏗️ Design System Generator
One click generates a complete design system snapshot — color palette, type scale, and spacing scale — extracted directly from the live page.
📤 Multi-Format Export
Export styles as CSS, JSON, or W3C Design Tokens for seamless handoff to your workflow.
🌓 Dark / Light Theme
Ships in dark mode with a persistent theme toggle.
Built with Vanilla JS, zero dependencies, and Shadow DOM isolation so the panel never conflicts with the page it inspects.
Perfect for web designers, frontend developers, and anyone who wants to understand how a page is built — instantly.