How-to · Color
How to pick a color from any web page in Chrome
The short answer
Click the Screen Ruler icon on the page, press 4 for the color loupe, and hover: a magnified view shows the exact pixel under the crosshair. Click to copy its value as HEX, RGB or HSL. Everything happens locally on the tab you invoked it on.
- 1
Open the page with the color you want and click the Screen Ruler icon.
- 2
Press 4 to switch to the color loupe.
- 3
Hover the target — the loupe magnifies the pixels so you can land on the exact one.
- 4
Click to copy the value to your clipboard.
- 5
Switch the copied format to RGB or HSL in settings if HEX isn't what you need.
- 6
Press Esc to remove the overlay.
You need the exact color of a button, a logo, a gradient stop. The screenshot-into-a-design-tool route takes minutes; DevTools has an eyedropper, but it's buried inside a CSS property field and assumes the color you want belongs to an element you can select. Screen Ruler's color loupe skips both detours: click the icon on the page, press 4, and pick the pixel directly.
Zoom in before you commit
The loupe magnifies the pixels around your cursor as you move. That matters more than it sounds: the color you're after is often one pixel wide — a hairline border, the edge of an icon, a single stop in a gradient — and everything around it is anti-aliased blends. With the zoomed view you pick the pixel you meant, not a neighbour that's three shades off.
It works on anything the page renders
Because the loupe reads rendered pixels rather than stylesheet rules, it isn't limited to elements with a background-color. Photos, gradients, canvas charts, SVG icons, text glyphs — if it's painted on the page, you can pick it. That's exactly the territory where "inspect element and read the CSS" gives up.
Copy as HEX, RGB or HSL
Click and the value is on your clipboard. HEX is the default; the settings page switches the copied format to RGB or HSL to match whatever your codebase expects. If you pick colors often, the same settings page can make the color loupe the default mode on launch, so the icon click alone puts you one hover from a value.
What you're picking, honestly
The loupe reports the color the browser actually painted — after opacity, overlays and blending have been applied. That's usually what you want, because it's what users see. But it means the picked value can differ from the token in the stylesheet: a brand color under a 90% white overlay picks as the blend, not the token. If you need the authored variable, DevTools is the right tool; the loupe tells you the truth about the screen.
Local, and only where you ask
Screen Ruler has no host permissions — the overlay is injected via activeTab only when you click the icon — and it makes no network calls, so picked colors never leave your machine. The flip side of being a page overlay: it can't pick from the browser's own toolbar or from other applications. For anything rendered inside a web page, though, it's the shortest path, and Esc removes it when you're done.