Keep your color workflow smooth by setting up these habits now. Pin the EyeDropper extension to your toolbar. That way, it’s always a single click away when inspiration strikes. Drop hex codes straight into CSS variables. Something like --primary: #3B82F6; keeps your designs consistent without...

How Do I Pick A Color From A Website?

Use the Chrome EyeDropper extension: click the extension, select ‘Pick color from web page,’ then hover over any element to capture its hex code.

What’s Happening

You can sample a color directly from any webpage by using built-in browser tools or a simple extension.

Need to match a color from a site? Instead of squinting at your screen or digging through source code, grab the exact hex code in seconds. Most modern websites define colors with hexadecimal values like #3B82F6 for text, backgrounds, and buttons. (No design degree required.)

Step-by-Step Solution

Here’s how to install and use EyeDropper in Chrome, Edge, or Brave.

Install the EyeDropper extension (Chrome, Edge, or Brave as of 2026):
1. Open chrome://extensions in your browser.
2. Flip the switch for “Developer mode” (top-right corner).
3. Hit “Load unpacked” and point it to the EyeDropper folder you downloaded.
Activate the picker:
1. Click the EyeDropper icon in your toolbar—it’s tiny, so look closely.
2. Select “Pick color from web page.”
3. Move your cursor over any element. The hex code pops up in a little tooltip.
4. Hit Enter to copy that code straight to your clipboard. Boom. Done.

Prefer DevTools over an extension?

DevTools has a built-in color picker you can use without installing anything.

Fire up DevTools with Ctrl+Shift+I (Windows/Linux) or Cmd+Opt+I (Mac).
Spot the element selector—it’s that little rectangle with an arrow in the top-left.
Hover over what you want to sample. DevTools will highlight it in blue.
Click once to lock it in, then check the Styles pane on the right.
Find the color property. Next to it? A tiny color swatch. Click it.
Copy the hex code from the input field that appears. That’s your color.

If This Didn’t Work

Try these fallback methods when your first approach fails.

Browser without DevTools: Firefox users, rejoice. Press Ctrl+Shift+C, then click any element to sample its color.
PDF colors: Open the PDF in Chrome or Edge, right-click the page, and choose “Print.” In the print preview dialog, you’ll find a built-in eyedropper—use it to grab the color you need.
Command-line option: Got PowerShell 7+ or Bash (WSL2)? Run curl -s https://example.com | grep -o '#[0-9a-f]\{6\}' to pull all hex codes from a page’s HTML in one go. (Yes, it’s nerdy. Yes, it works.)

Prevention Tips

Keep your color workflow smooth by setting up these habits now.

Pin the EyeDropper extension to your toolbar. That way, it’s always a single click away when inspiration strikes.
Drop hex codes straight into CSS variables. Something like --primary: #3B82F6; keeps your designs consistent without hunting for the same shade every time.
Save your favorite codes in a text file or Chrome’s Snippets (DevTools > Sources > Snippets). Reuse them across projects without ever second-guessing your palette.