Pixelkit

The only design extension you need. Designers usually end up hunting the store for a color picker, a font identifier, a ruler, a grid tool, a screenshot tool, an asset downloader, a contrast checker… then find that half of them lock the useful features behind a Pro plan. Pixelkit puts all of them in one small toolbar, made specifically for designers, with nothing behind a paywall. • No account, no ads, no tracking, no limits • Live editing, Tailwind and design-token export, full-page screenshots with mockups, an accessibility audit, bulk asset downloads and unlimited collections: all free • One shortcut (Alt+Shift+D) opens it on any website; Esc closes it INSPECT • Inspect: hover any element to see its size, font, colours, padding, radius and shadow. Click to pin it, then use the arrow keys to move through parents, children and siblings. Copy the CSS or save it. • Measure: the exact distance between any two elements. • Font finder: the font that actually renders (not just the first one in the stack), with a live preview. • Color picker: an eyedropper with a zoom loupe. HEX, RGB, HSL and OKLCH, contrast on black and white, and an 11-step shade scale. EDIT • Live edit: click anything and change its text, font (any Google Font), size, weight, spacing, colours, gradients, images or video, right on the page. Padding and margin can be edited all four sides together or one at a time. Undo any single change, copy the CSS, or grab a before/after screenshot. • Swap the page's heading and body fonts in one go. • Grid & guides: column, row, modular and square grids (stretch, left, center or right), plus draggable guides. EXTRACT • Style guide: any site's palette, fonts, type scale, spacing, radii, shadows and gradients in a second. Export as CSS variables, a Tailwind config, design tokens (DTCG) or a PNG style sheet. • Assets: every image, inline SVG, icon, background, favicon, social image and video on the page. Preview, copy the SVG code, or download one or all as a .zip. CAPTURE • Screenshots of the visible area, the full page, one element or a dragged region. • Annotate with arrows, boxes, highlights, freehand, text, and blur for anything private. • Mockup mode: put the shot in a browser or phone frame on a gradient, colour or image background, at 4:3, 16:9, 1:1 or 4:5, ready to post. CHECK • Contrast: click text to grade it against WCAG 2.2 and get the closest passing colour. • Vision simulator: protanopia, deuteranopia, tritanopia, achromatopsia, blur and low contrast, on the live page. • Quick audit: low contrast, tiny text, small tap targets, missing alt text, unnamed buttons, unlabeled fields and heading order. Click a result to find it on the page. • Responsive viewer: the page at phone, tablet and desktop sizes side by side. KEEP WHAT YOU FIND • Collections in the side panel hold every colour, font, element, asset, screenshot and style guide you save, with the page it came from. Export as CSS variables or JSON. • Utilities: palette builder, contrast checker, gradient and shadow builders, px/rem and colour converters, placeholder text and images. BUILT FOR DESIGNERS • Every tool has a single-key shortcut, and Ctrl/⌘+K searches all of them. • Number fields scrub like Figma: drag left or right, hold Shift for bigger steps. • Dock the toolbar to any edge of the screen. • Works on pages with strict security rules and smooth-scroll libraries. PRIVATE BY DESIGN No account, no server, no analytics, no tracking. Pixelkit only runs on a tab when you open it, and everything you save stays on your computer.