Two clicks—that’s all it takes to grab an exact color from any webpage. No design tools. No guesswork. Here’s how to pull a hex code (like #6B46C1) straight from your browser.
Quick Fix: Grab the free EyeDropper extension for Chrome, Edge, or Brave. Click its icon, hover over any element, hit Enter, and the hex code copies itself to your clipboard.
What’s Happening
These codes always start with a hash symbol followed by six characters (#RRGGBB). Modern browsers give you direct access to these values through built-in tools or lightweight extensions. No coding. No eye strain. Just point, click, and grab the exact shade you need.
(As of 2026, Chrome 126+ and Edge 126+ share identical DevTools, so the steps below work in either browser unless noted otherwise.)
Step-by-Step Solution
-
Install EyeDropper (best for speed):
- Open chrome://extensions (or edge://extensions).
- Flip the “Developer mode” switch in the top-right corner.
- Download the EyeDropper package from eyedropper.org. Choose “Load unpacked” and point to the folder—no restart needed.
-
Pick the color:
- Click the EyeDropper icon in your toolbar—it looks like a dropper.
- Select “Pick color from web page.” Your cursor turns into an eyedropper.
- Hover over any element (text, button, border). The hex code pops up in a tooltip.
- Press Enter to copy the code to your clipboard automatically.
Built-in alternative (no extensions): DevTools Color Picker
- Press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac) to open DevTools.
- Click the element selector (top-left of DevTools—a rectangle with an arrow).
- Hover over the element whose color you want; DevTools highlights it in blue.
- Click once to lock it in, then look at the Styles pane on the right.
- Find the color property. There’s a tiny swatch next to it.
- Click the swatch and copy the hex code from the input field that appears.
If This Didn’t Work
-
Firefox users: Press Ctrl+Shift+C to open the built-in eyedropper. Click any element to sample its color directly—no extension needed.
-
PDF colors: Open the PDF in Chrome or Edge, press Ctrl+P, and in the print preview dialog you’ll see an eyedropper icon. Use it to grab the exact shade from the rendered page.
-
Command-line grab: With PowerShell 7+ or WSL2 Bash, run
irm https://example.com | Select-String -Pattern '#[0-9a-f]{6}' -AllMatches | % { $_.Matches.Value }
to extract every hex code from a page’s HTML. (Requires curl or Invoke-RestMethod in PowerShell.)
Prevention Tips
-
Pin EyeDropper: Right-click the extension icon and choose “Pin” so it’s always visible in your toolbar.
-
Use CSS variables: Drop the hex code into a variable like
--brand: #6B46C1;in your stylesheet. Then referencevar(--brand)everywhere. Keeps your palette consistent and editable in one place. -
Save snippets: In DevTools, go to Sources > Snippets, create a new snippet named “colors,” paste your hex codes, and save. Reuse them across projects without hunting for the same shade twice.
Sources: EyeDropper extension documentation eyedropper.org, Chrome DevTools updates via developer.chrome.com, Firefox DevTools via Mozilla.
What’s Happening
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.)
