How to Pick a Color From Any Website

By the Keynou team · July 17, 2026 · 6 min read

You found the perfect shade on someone's website - a button, a logo, a gradient stop - and now you need its exact value. Screenshots and guessing get you close; an eyedropper gets you the precise pixel. Here are the three ways designers and developers actually do it, from fastest to most manual.

Method 1: A color picker extension (fastest)

A dedicated eyedropper extension turns the whole job into one click. With Keynou Colorpicker, the flow looks like this:

1. Click the extension icon in your toolbar (or press Alt+Shift+P).
2. A zoomed magnifier appears under your cursor. Hover over the color you want - the loupe enlarges the surrounding pixels so you can land on exactly the right one, even on 1px borders or anti-aliased text.
3. Click. The color is copied to your clipboard instantly in your preferred format - HEX by default, or RGB, HSL, HSV and CMYK if you have set those.

Because the extension uses the browser's native EyeDropper API, it can sample anything visible on your screen - not just the current tab. Other windows, images, video frames, PDFs, even your desktop wallpaper are all fair game. Your last 20 picks are kept in a local history, which quietly becomes a palette as you work.

Method 2: Chrome DevTools (no extension needed)

Chrome has an eyedropper buried inside DevTools. It costs a few more clicks but works out of the box:

1. Right-click the element whose color you want and choose Inspect.
2. In the Styles panel, find a color property (like color or background-color) and click the small colored square next to the value.
3. Chrome opens its color editor with an eyedropper active - click anywhere in the page to sample a pixel.

Two caveats. First, the DevTools eyedropper only samples inside the page viewport - it cannot reach other windows or your desktop. Second, if the element's color comes from an image or a gradient rather than a CSS property, you may have to hunt through the Styles panel before you find a swatch to click at all.

Method 3: Built-in OS tools

Both major desktop operating systems ship a basic picker:

• Windows: the PowerToys suite includes Color Picker (Win+Shift+C). It samples anywhere on screen and shows HEX/RGB/HSL. You have to install PowerToys separately.
• macOS: Digital Color Meter (bundled with macOS, in Applications → Utilities) shows the color under the cursor continuously and can copy values with Cmd+Shift+C.

These are fine for occasional use, but they live outside your browser workflow: no clipboard format choice in the browser context, no pick history, and extra keystrokes to convert the value into the format your CSS actually needs.

Which method should you use?

If you pick colors more than once a week, the extension pays for itself immediately - especially since the picked value lands on your clipboard already formatted for your stylesheet.

Picking from gradients, images and background elements

Not every color on a page comes from a simple CSS property. Gradients blend two or more stops, hero sections often use background images, and some colors are baked into logos or photos. The DevTools method struggles here because there may be no single swatch to click. A screen eyedropper does not care where the color comes from - it reads the rendered pixel, whether that pixel is a gradient midpoint, a JPEG artifact, or a flat fill. When sampling a gradient, decide which stop you actually want and zoom in on that exact point rather than the blended middle.

Does this work in other browsers?

The extension method works in any Chromium browser that supports the EyeDropper API - Chrome, Edge, Brave, Opera and Vivaldi, all from version 95. Firefox and Safari do not implement the API, so there is no equivalent one-click extension picker there; on those browsers the DevTools or OS-tool routes are your options. For the technical detail, see the EyeDropper API.

Scope note: this page vs. picking from anywhere

This guide is about grabbing colors from web pages in Chrome. If the color you need lives outside the browser - in a native app, a design tool, or your desktop - see how to get the hex code of any pixel on your screen, which covers OS-level pickers. For the browser API that powers the extension method, see the EyeDropper API.

Sources

The extension method relies on the browser's native eyedropper, documented in the MDN EyeDropper API reference. Chrome's in-page picker lives in the Chrome DevTools documentation.