PixelKit — Web Design Toolkit

Inspect colors & images, capture screenshots, forge custom styles, and save presets that auto-apply on every visit.

PixelKit — All-in-One Web Design Inspector & Editor Extract colors, copy CSS, take screenshots, overlay grids, edit styles live, and test APIs — all inside your browser. PixelKit brings together the tools designers, developers, and QA teams use every day into a single extension. Why PixelKit? ✔ Work directly on the page you're viewing — no tab switching ✔ Replace 10+ separate extensions with one unified toolkit ✔ Skip heavy desktop apps like Figma or Postman — your browser is enough — Free Features — ▸ Color Picker Click any element to instantly extract its color. Supports HEX, RGB, HSL, and OKLCH formats. Every color you pick is saved to your history automatically. ▸ Hoverify (Element Inspector) Hover over any element to see its dimensions, tag, and class names at a glance. Click to view detailed CSS properties. ▸ Visible Area Screenshot Capture what you see in one click. ▸ Grid Overlay Display Figma-style grids on top of any page. Supports Columns, Rows, and Grid (px) types with multiple layers. Includes presets for Bootstrap 12-col, 8px Baseline, 960 Grid, and more. Freely adjust column count, gutter, margin, max width, color, and opacity. ▸ Image Detection Hover over images on the page to detect and download them instantly. — Pro Features — ▸ Palette Extractor Automatically analyze and categorize the key colors used on any page. Perfect for studying design systems or identifying brand colors. ▸ Font Inspector View font family, size, weight, line height, and other typography details for any selected element. ▸ Spacing Measurement Measure the exact pixel distance, padding, and margin between any two elements. Instantly verify if implementation matches the design spec. ▸ Contrast Checker (WCAG) Calculate the contrast ratio between background and text colors. Shows WCAG AA/AAA pass/fail status — essential for accessibility audits. ▸ CSS Copy Extract CSS from any selected element. Choose from 4 scopes: All, Typography, Layout, or Colors — copy only what you need. ▸ Area Selection Capture Drag to capture a precise region of the page. ▸ Full Page Capture Capture the entire page including scrollable areas as a single image. ▸ Annotated Capture Draw arrows, boxes, and text before capturing. Ideal for bug reports and design feedback. ▸ Visual Editor Click any element and edit its styles in real time — colors, fonts, sizes, and more. Supports Undo/Redo, and all changes can be saved as presets for later. ▸ Style Strip Progressively strip CSS in 4 levels: Grayscale → Remove backgrounds → Remove decorations → Naked HTML. Useful for analyzing layout structure or testing accessibility. ▸ Quick Themes Apply built-in themes like Dark Pro, Minimal White, and Terminal with one click. Great for dark mode testing or quick visual experiments. ▸ API Tester Send HTTP requests and inspect responses right in your browser — no Postman needed. ▸ CORS Bypass Toggle CORS restrictions on and off during development with a single click. ▸ Header Modifier Add or modify request and response headers freely. Test with different auth tokens, User-Agent strings, and more. ▸ GraphQL Client Execute GraphQL queries and inspect results instantly. ▸ JWT Decoder Paste any JWT token to automatically decode its header and payload. ▸ Cookie Manager View, edit, and delete cookies for the current domain. ▸ Response Viewer & TTFB Log API responses in real time and measure Time to First Byte. ▸ Dummy Data Generator Generate test data (names, emails, addresses, etc.) in JSON or CSV format instantly. ▸ Preset Manager Save your edited styles, hidden elements, and applied themes as presets. Reapply them anytime, and export/import as JSON to share with your team. — Who is PixelKit for? — • Designers — Analyze colors, fonts, and spacing from any live site in seconds • Frontend Developers — Copy CSS, experiment with styles in real time, and test APIs without leaving the browser • QA & Testers — Create clear bug reports with annotated screenshots and accessibility checks • PMs & Product Owners — Measure and verify the gap between design specs and actual implementation — Technical Details — • Built on Manifest V3 • Shadow DOM ensures complete isolation from page styles • Zero impact on page performance (pointer-events: none overlay) • All data stored locally — nothing is sent to external servers