How to Pick Any Color from a Website (Exact Hex Code)

You're browsing a website and you spot a perfect shade of teal in their header. Or maybe it's the exact orange used in a CTA button that somehow converts really well. You want that color. You need the hex code.

The problem is that most people don't know there's a fast, precise way to get it. Some try right-clicking images. Some dig into DevTools and hunt through hundreds of CSS rules. Some take screenshots and try to eyeball it in Photoshop.

This guide covers every method — from the fastest (a dedicated extension) to the manual approach — so you always have the right tool for the situation.

Method 1: Use a Color Picker Extension (Fastest)

A browser color picker extension adds an eyedropper tool directly to Chrome. It can sample any pixel rendered on screen — backgrounds, images, text, gradients, icons, anything. This is by far the most reliable and fastest approach.

Method 2: Chrome DevTools Inspector

Chrome's built-in developer tools have a color picker, but it works differently. It shows colors assigned via CSS — which means it only works on elements that have a color-related CSS property. You can't use it to sample an arbitrary pixel in an image.

Steps to use the DevTools color picker:

1. Right-click the element whose color you want and select Inspect.
2. In the Styles panel on the right, look for any CSS property with a color value — color, background-color, border-color, etc.
3. Click the small colored square next to the hex or RGB value. A color picker panel opens.
4. Within that panel there's an eyedropper icon. Click it to sample any pixel on screen.
5. The color value updates in the DevTools panel. Copy it from there.

Method 3: The EyeDropper Web API (For Developers)

If you're building a web app and want to let users pick colors from their screen, Chrome supports the native EyeDropper API introduced in Chrome 95+. This is not something end users invoke manually — it's a JavaScript API.

const eyeDropper = new EyeDropper();
eyeDropper.open().then((result) => {
 console.log(result.sRGBHex); // e.g., "#3b82f6"
});

When triggered, the browser shows a native dropper cursor that lets users pick any color from anywhere on their screen. This requires user gesture (like a button click) and works in secure contexts (HTTPS or localhost). The result comes back as a hex string in sRGB space.

Method 4: Screenshot + Desktop Software

If you can't use an extension (for example, in a locked-down browser environment), you can take a screenshot and open it in image editing software:

1. Press PrtScn (Windows) or Cmd + Shift + 4 (Mac) to capture the screen.
2. Open the screenshot in Photoshop, GIMP, Paint.NET, or even macOS Preview.
3. Use the eyedropper tool in the software to click the color.
4. Check the color picker panel for the hex or RGB value.

This works but it's slow, requires software, and can introduce slight color shifts depending on how the screenshot is processed. It's the fallback of last resort.

Understanding What the Color Codes Mean

Once you pick a color, you'll typically see it expressed in three formats. Here's what each one is for:

For web work, hex is the format you'll paste most often. For programmatic color manipulation (like generating tints and shades), HSL is much more intuitive because hue, saturation, and lightness are directly adjustable as separate values.

Picking Colors from Images Embedded on Websites

Images deserve a specific mention because picking from them has a gotcha: JPEG compression and image rendering can slightly alter colors. A logo that looks like a pure white on screen may actually render as #fdfdfd due to compression artifacts around the edges.

Best practices for accurate image color picking:

• Pick from the center of solid areas, not near edges where compression artifacts cluster.
• If the image is a logo, check the brand's official style guide — logo colors are almost always specified there and the rendered pixel value may differ slightly from the official Pantone or hex specification.
• For SVG images, right-click and open in a new tab, then inspect the SVG source for the exact fill or stroke values. SVG stores color as code, not pixels, so it's perfectly accurate.
• Zoom in on the area first before picking, especially for small UI elements.

Picking Colors from Videos and Streaming Pages

Browser color pickers work on video thumbnails with no issues. For actual playing video, pause the video at the exact frame you want, then use the eyedropper. The extension samples whatever is currently rendered on screen, so a paused frame works perfectly.

Note that some video players use DRM-protected content that renders through a separate compositing layer — in those rare cases, the eyedropper may pick a black or blank value over the video area. Pause and try taking a system screenshot first, then picking from that.

Getting Exact Colors vs. Perceived Colors

There's a distinction worth understanding: the color you pick is the exact pixel value rendered on your screen. Whether that matches what the designer intended depends on a few factors:

• Monitor calibration: An uncalibrated monitor may display colors differently. The hex value you pick is accurate for your screen, but the same hex may look different on another screen.
• CSS filters: If a parent element has filter: brightness() or mix-blend-mode applied, the rendered color differs from the raw CSS color value. The picker captures the final rendered result — which is usually what you actually want.
• Transparency/opacity: A semi-transparent element blends with what's behind it. The picker captures the blended color as it appears, not the original RGBA value before blending.

For design reproduction purposes, capturing the rendered color is usually correct. For understanding the original design intent (what the CSS actually says), use DevTools to inspect the specific property.

Organizing Colors You Pick

Picking a single color is just the start. If you're doing design research, reverse engineering a competitor's brand, or building a component library, you'll quickly accumulate dozens of colors. Without organization, they're useless.

A dedicated color picker extension lets you:

• View your full pick history so nothing gets lost
• Group related colors into named palettes (e.g., "Brand Primary," "Competitor Research," "Landing Page Redesign")
• Export palettes as JSON, CSS variables, or Tailwind config format
• Check contrast ratios between picked colors for accessibility compliance

Frequently Asked Questions

Related reading: How to Create a Color Palette from Any Website  •  Hex vs RGB vs HSL: Color Codes Explained  •  Color Picker Tools Every Web Designer Needs