The Toolkit for Designers Who Implement Their Own Work

Click any pixel on any webpage and get the HEX, RGB, and HSL value. The eyedropper keeps a palette history so you can build a color set from a reference site without copying values one by one. Useful for extracting a competitor's palette, matching a client's brand colors to a design system, or verifying that the implemented color matches the Figma spec.

Pick any two colors from the page using the eyedropper or enter HEX/RGB values manually. onHover calculates the contrast ratio and shows AA and AAA pass-fail ratings for normal text and large text side by side. Catch contrast failures at the implementation stage, before QA or an accessibility audit does.

Hover over any element to see its computed font family, size, weight, line-height, letter-spacing, color, background, padding, margin, and border radius — all at once, no panel digging. Useful when you're implementing a design and want to confirm the rendered output matches the spec, or when a client site uses a font or spacing value you want to reference.

Capture the full page (including content below the fold), the current viewport, or a specific element. Screenshots are timestamped and include the URL. Use them for design review comments, bug reports with visual context, before/after comparisons, or client handoff documentation. No browser extension toolbar visible in the capture.

Switch between device presets (iPhone SE, iPhone 14, iPad, Android, Desktop) or enter a custom width. The page renders at that viewport immediately — no DevTools, no resize handles, no layout shift from the inspector sidebar itself taking up screen space. Rotate between portrait and landscape. Zoom in to check dense layouts.