Install free

An eyedropper for Chrome

Chrome has an eyedropper, but it is hidden inside DevTools. Here is how to use it, and when an extension is the faster way.

The built-in one, in DevTools

Right-click the page and choose Inspect. In the Styles pane, click any small color square to open the color picker, then click its eyedropper icon and click anywhere on the page.

It needs no install, but it takes several steps each time, and the color lands in that CSS rule. To keep it you copy it somewhere yourself.

With Pigmo

  • Click the Pigmo button, then Pick.
  • A loupe shows the pixels under your pointer, with the color code next to it.
  • Click. The code is copied and the color is saved to your library.
  • Press Esc to stop without picking.
A magnifying loupe over a coffee bag on a website, showing the pixel grid and the code #16324F.
The loupe shows the exact pixel and its code before you click.

HEX, RGB or HSL

Pigmo copies the code in the format you choose in its popup: HEX such as #D2603A, RGB such as rgb(210, 96, 58), or HSL such as hsl(15, 63%, 53%). The popup shows all three for the last color, so you can copy another format without picking again.

Pigmo's popup showing a picked orange color as HEX, RGB and HSL.
The last pick in all three formats. Click any line to copy it.

Pages where picking does not work

Chrome does not let any extension run on its own pages, such as the Chrome Web Store, the settings and the new tab page. There, use the DevTools eyedropper. PDF files opened in the browser are the same. Everywhere else, including pages behind a login, Pigmo picks the pixel you see.

What else it does

Pigmo keeps every color you pick, so the one from last week is still there. It can also grab the palette of a whole page in one click. It works in Chrome, Edge, Brave, Opera, Vivaldi, Arc and other Chromium browsers.