Features take one thing

Pick any colour from any web page, including inside images

C Sample a colour in the toolbar, free with no account

Chrome's own eyedropper, which is the only thing that can read a pixel inside an image, a canvas or a video. No amount of stylesheet reading gets you a colour out of a photograph.

Sample a colour on a real page. Silent, 900KB, and nothing is fetched until you scroll to it.

What you get

Any pixel on screen
Including inside images, canvas, video and anything else that paints rather than declares.
Three formats
Hex, rgb or oklch, whichever you set in settings.
Straight to the clipboard
The readout confirms what was copied.

How Verbatim does it

It uses Chrome's own EyeDropper API, so it reads the composited pixel on screen rather than a CSS declaration. That is why it works inside an image, a canvas, a video or a gradient, where no stylesheet has an answer, and why the value is the one your eye is actually seeing after every blend and overlay above it.

How to use it

  1. Press Alt+Shift+P, then C.
  2. Click any pixel on the screen.
  3. The value is on your clipboard.

What it will not do

Compared with reading the colour out of the CSS

Reading a declaration gives you what the stylesheet says. That is the right answer for a solid background and the wrong one for everything sitting under an overlay, a gradient, a blend mode or an image, where the colour you can see is the result of a composite no single declaration describes.

Sample a colour uses Chrome's own EyeDropper, so it reads the pixel on screen after every layer above it has been applied. That is why it works inside a photograph, a canvas or a video, and why the value is the one your eye is actually receiving.

When to use this one

Use Sample a colour for one value, especially one no stylesheet can explain. Use Design system when you want the whole palette with roles and contrast, and Pick element when you want the declaration and the token name behind it rather than the pixel.

Questions about Sample a colour

Can it pick a colour from inside an image or a video?

Yes. It reads the composited pixel rather than a CSS declaration, so images, canvas, video, gradients and anything under a blend mode all work.

Which formats does it copy?

Hex, rgb() or oklch(), set once in the options. OKLCH is worth choosing when you intend to build a scale from the colour, because adjusting lightness there produces a result that looks correspondingly lighter rather than washed out.

Can it read a pixel outside the browser window?

Chrome’s eyedropper is limited to the browser surface, so other applications and the desktop are out of reach. Inside any tab, anything visible is fair game.

Does it work on every site?

Yes, because it does not depend on reading the page’s CSS at all. A site that blocks stylesheet access still hands over its pixels, since that is what it drew.

What is the keyboard shortcut?

C, once the toolbar is open with Alt+Shift+P.

Already have it? The first thirty seconds covers the shortcut, all thirteen keys and what to do if something does not work.

Guides that use it

Next to this one