Google Chrome is the undisputed king of web browsers, heavily favored by designers and developers alike. If you are browsing a website and spot a gorgeous button color, a sleek dark-mode background, or a beautiful typography gradient, you might wonder: How do I extract that exact HEX code directly in Chrome?
The good news is that you don't need to take screenshots and open heavy software like Photoshop. Google Chrome comes with a highly advanced built-in color picker hidden right inside its Developer Tools. Additionally, modern Chrome updates have introduced native APIs that allow you to pick colors from anywhere on your monitor.
In this guide, we will break down every single way to pick a color in Chrome. We'll cover the built-in Inspect Element method, the best third-party extensions, and how to check your colors for accessibility. Are you on Chrome right now? Test our interactive Native Chrome Eyedropper tool below!
🧪 Try It: Native Chrome Eyedropper & Palette Builder
🛠️ Method 1: Chrome DevTools (The Built-in Way)
Here is the step-by-step process to unleash Chrome's hidden color picker:
Inspect the Element
Hover your mouse over the exact background, button, or text you want the color of. Right-click and select "Inspect". Alternatively, use the keyboard shortcut Ctrl+Shift+C (Windows) or Cmd+Option+C (Mac).
Find the Styles Pane
A window (DevTools) will open on the right or bottom of your screen. Ensure you are on the Elements tab. Look at the secondary panel labeled "Styles".
Locate the Color Square
Scroll through the CSS rules until you find color: (for text) or background-color: (for backgrounds). Right next to the HEX or RGB code, Chrome displays a tiny colored square.
Open the Color Picker UI
Click on that tiny colored square! A full Color Picker UI will pop up. From here, you can click the eyedropper icon inside the popup to sample any other color on the webpage, or use the arrows to toggle the code format between HEX, RGB, and HSL.
🔌 Method 2: Chrome Extensions (The Easy Way)
While DevTools is incredibly powerful, opening code panels can be intimidating. Furthermore, DevTools only reads CSS code—it cannot extract a color from an image or a video playing on a webpage. For that, you need a Chrome Extension.
1. ColorZilla (The Industry Standard)
With over 3 million users, ColorZilla is the most trusted extension on the Chrome Web Store. Once installed:
- Click the eyedropper icon in your Chrome extensions bar.
- Your cursor will become a crosshair. Hover over any image, text, or background.
- Click the mouse, and the HEX code is instantly copied to your clipboard.
2. Eye Dropper
A lightweight, open-source alternative to ColorZilla. Eye Dropper lacks some advanced features like gradient generators, but it is incredibly fast and maintains a robust history of every color you have ever picked.
chrome:// settings pages. If your extension icon is grayed out, this is why!🎨 Extracted Your Perfect Color?
Don't stop at one color. Plug your extracted HEX code into our free Color Palette Generator to instantly create harmonious complementary and analogous color schemes.
Open Palette Generator →🌐 Method 3: The Native EyeDropper API
If you used the interactive tool at the top of this page, you experienced the EyeDropper API. Previously, websites and extensions were strictly "sandboxed"—meaning they could only see what was inside the browser tab.
The new EyeDropper API allows a website to ask Google Chrome to open a system-level magnifying glass. This means you can click a button on a web app (like Figma, Canva, or our tool above), drag your mouse out of Chrome, and pick a HEX code directly from your desktop wallpaper, Photoshop, or a Spotify window!
🔍 Bonus: Chrome's Hidden Contrast Checker
Picking a color is only half the battle. If you are a web designer, you must ensure your text color is readable against your background color, as mandated by the WCAG (Web Content Accessibility Guidelines).
Google Chrome has a Contrast Checker built right into its color picker!
- Open DevTools (Inspect Element) and find a text element.
- Click the tiny colored square next to its
color:property. - In the popup UI, look for the section titled "Contrast ratio".
- Chrome will display a number (e.g., 4.5) and a green checkmark if it passes accessibility standards. If it shows a red prohibition sign, your text is too hard to read!
- Chrome will even draw two lines on the color spectrum map. Clicking below those lines will automatically adjust your color to make it legally accessible.
❓ Frequently Asked Questions
Does Google Chrome have a built-in color picker?
Yes! Google Chrome has a highly advanced color picker built directly into its Developer Tools (DevTools). You can access it by right-clicking any element, selecting "Inspect", and clicking any tiny colored square in the "Styles" pane on the right.
What is the best color picker extension for Chrome?
ColorZilla and Eye Dropper are the two most highly rated and widely used color picker extensions on the Chrome Web Store. They allow you to pick colors from webpages and images quickly without needing to open developer tools.
How do I check color contrast in Chrome?
Open Chrome DevTools, click the colored square next to any CSS text color property, and look at the "Contrast ratio" section in the popup menu. It will show a green checkmark if your color passes WCAG visual accessibility standards, or a red sign if it fails.
Why does the Chrome extension color picker not work on some pages?
Chrome extensions are strictly blocked by Google from running on internal pages (like chrome://settings or the New Tab page) and the Chrome Web Store itself for security and privacy reasons. The extension will only activate on standard websites.
What is the Chrome EyeDropper API?
The EyeDropper API is a native feature introduced in modern Chromium browsers. It allows web applications to open a system-level magnifying glass tool, letting users pick a color from anywhere on their monitor (even outside the browser) without installing extensions.