Inspect page elements and pick colors

Facts worth checking first

• What it does: Click a page element to view a Figma-like properties panel, and pick any on-screen pixel with the eyedropper.
• Page content, selections, and generation results stay on this device by default and are not uploaded to KnowIt.
• Free once the extension is installed.

Read the full FAQ

Design notes: Element Inspector

You're browsing, you come across a color scheme you like, a nice typeface, spacing that just feels right — and you want to note it down for later. The trouble is that all of it lives in the page's code, and the only way to see it is to open the browser's developer tools. That thing does far too much: screens of English and numbers that send any non-programmer straight back out.

This tool exists to fix that small annoyance. The idea is simple: skip the complicated parts, do one thing well.

1. Turn heavyweight developer tools into a handy little one

The browser's built-in inspector is powerful, but it was built for developers, and its panels are stuffed with network requests, error logs, and source debugging that ordinary people never need. This tool cuts all of that away and keeps only what gets used most: pick a color, check a font size, measure some spacing, see what the corner radius is. The interface is clean, it works the moment you open it, and whatever your cursor lands on is what it shows you. Nothing to learn, no shortcuts to memorize.

2. Install it and go, no thinking required

No account, no manual, nothing to configure. Once installed, click the icon on any page, move your mouse around, and the style information appears right on screen — colors as actual values, elements outlined automatically. The whole thing is as direct as taking a screenshot, with no technical barrier at all. Hand it to anyone and they'll figure it out.

3. Later, not just one color — the whole style, packed up in one click

Today you can pick colors and read font sizes one at a time. But it will keep growing: eventually one action should identify every color, typeface, spacing value, and corner radius the page uses and lay them out as a clear reference card. See a page you like, click once, and take its entire visual language with you. Going from “grabbing one color” to “packing up a whole style” is what this is really meant to become.

It's early, so it isn't especially powerful yet, and some things won't be detected accurately. But the direction is clear: a small tool a designer can pick up and use straight away, that feels good in the hand, and that keeps getting better.