How to Pick a Color From Any Website in Chrome (HEX and RGB)

Why you can't always just read the CSS

You see a color you like on a website, a button, a heading or a patch of sky in a photo, and you want its exact value for your own design or code. The obvious first move is to open the page source and look for it. That works when the color is a plain CSS value on a single element. It falls apart quickly in real pages.

Many colors you see are not written anywhere in the CSS. A color inside a photo, a video frame, a canvas chart or a gradient is the result of rendering, not a value you can copy. Even plain elements can be misleading: transparency, overlays, blend modes and filters change what actually reaches the screen. If you want the color as it really appears, you need a tool that samples pixels, not one that reads styles.

Below are three ways to do it in Chrome, from the tools already built in to a dedicated extension.

How to pick a color with Chrome DevTools

Chrome DevTools has a color picker with an eyedropper hidden inside the Styles pane. It is free and already installed, so it is worth knowing.

• Right-click any element on the page and choose Inspect, or press Ctrl+Shift+I (Cmd+Option+I on a Mac).
• In the Styles pane, find any rule with a color value, such as color or background-color, and click the small colored square next to it.
• The color picker opens. Click the eyedropper icon, then move your mouse over the page and click the pixel you want.
• The value updates in the picker. Click the format arrows or the value itself to switch between HEX, RGB and HSL, then copy it.

Where the DevTools method gets awkward

The DevTools eyedropper does sample the rendered page, so it works on images too. But it has a few rough edges for everyday use. You need an element with a color property to open the picker in the first place, which means a detour through the Styles pane every time. Note that clicking around with the eyedropper also changes that CSS value on the live page until you reload, which can be confusing.

It also gives you no zoom on the page itself, so hitting a single pixel on a thin line of text or the edge of an icon is guesswork. And it only works inside the tab you are inspecting, not on the rest of your screen. For one quick check it is fine. If you pick colors several times a day, the extra steps add up.

Chromium browsers also expose a built-in EyeDropper API that web pages and extensions can call to sample a color from anywhere on your display. You will not find a button for it in Chrome itself, but it is what lets some tools reach outside the browser window.

How to get the color from an image or video

For an image on a web page, any pixel-sampling picker will do the job, because it reads what is drawn rather than the HTML. If the image is small or scaled down, open it in its own tab first (right-click it and choose Open image in new tab) and zoom in with Ctrl and the plus key. A larger image gives you more pixels to aim at, which matters when you want the color of a specific detail rather than a blend of its neighbours.

For video, pause on the frame you want before sampling. Compressed video often has slightly different values from pixel to pixel even in areas that look flat, so sample a few points and pick the one that looks most representative. The same is true for photos: there is rarely one single correct value for something like a sky, so decide whether you want the lightest, darkest or a middle tone.

How to pick a color with a magnifier using Loupe

We built Loupe because we wanted the eyedropper without the detour. It is a free Chrome extension that opens a magnifier with a pixel grid over the page, so you can see individual pixels before you click and sample the exact one you meant.

• Press Alt+Shift+P, or click the Loupe toolbar button and choose Pick on page.
• Move over anything on the page: text, photos, a paused video frame, a canvas chart or a gradient. The readout shows the value under the crosshair as you go.
• Click. The HEX value is copied to your clipboard straight away, so you can paste it into your editor or design tool.
• Open the popup if you need more: the same color as RGB, HSL, OKLCH and CMYK, each copied with one click, plus a nine-step tints and shades scale and your recent colors.

How to pick a color from anywhere on your screen

Sometimes the color you want is not in a web page at all. It might be in a design app, a PDF viewer or another program. Loupe has a Screen button for this. It uses Chrome's native eyedropper, which reaches anywhere on your display, not just the current tab. Click Screen, move to the color in any window and click it.

This is the main reason to use a tool built on the browser's eyedropper rather than one that reads CSS: a CSS reader can only tell you about elements in the page, while a pixel sampler can tell you about anything you can see.

Check the color before you use it

Once you have a value, it is worth a quick check before it goes into a real design, especially if you plan to put text on it. Loupe shows the contrast of every picked color against white and against black, graded AA, AAA or Fail, so you can see at a glance whether white or black text on it will be readable. If you want to understand what those grades mean, we explain the thresholds in WCAG color contrast explained.

On privacy: Loupe has no access to any site until you invoke it on a tab, makes no network requests and keeps your color history on your own computer. The details are in the Loupe privacy policy.

Try it

Loupe is live on the Chrome Web Store and free, with no account, upsell or ads. Add Loupe to Chrome, press Alt+Shift+P on any page, and click the pixel you want. You can see screenshots and the full feature list on the Loupe product page.