You stumble upon a beautifully designed website. The background is a perfect deep navy, and the "Sign Up" button is a highly converting, vibrant neon pink. As a designer or developer, you want to know: What exact HEX codes are they using?
You cannot simply guess a color. A slight miscalculation on the color wheel can turn a premium layout into a cheap-looking mess. To clone a color palette, analyze a competitor, or match your brand guidelines, you need to know exactly how to pick a color from a webpage.
In this guide, we break down the 5 proven methods to extract CSS color codes—from using the developer tools built directly into your browser, to powerful extensions and native OS utilities. Want to see how the pros do it? Try our interactive DOM Inspector Simulator below!
🧪 Try It: Webpage Color Inspector Simulator
Click any HEX, RGB, or HSL code in the right panel to instantly copy it to your clipboard.
🛠️ Method 1: Inspect Element (The Pro Method)
Here is how to do it in Google Chrome (or Microsoft Edge):
Right-Click the Target
Hover your mouse exactly over the text, button, or background you want to extract. Right-click and select "Inspect" (or press Ctrl+Shift+C / Cmd+Option+C).
Check the Styles Tab
A panel will open on the right or bottom of your screen. Look at the "Styles" tab. Here, you will see the exact CSS rules applied to that element.
Find the Color Square
Look for the color: (for text) or background-color: property. Right next to the HEX code, Chrome displays a tiny colored square. You can copy the code directly, or click the square to open Chrome's built-in advanced Color Picker!
🔌 Method 2: Browser Extensions (ColorZilla)
If looking at CSS code intimidates you, or you need to grab colors from images and videos (which Inspect Element cannot do), a browser extension is your best friend.
Top Recommendation: ColorZilla
ColorZilla is the most proven color picker extension with millions of users. Once installed in Chrome or Firefox:
- Click the ColorZilla eyedropper icon in your browser toolbar.
- Your cursor will turn into a crosshair. Hover over anything on the webpage (including images).
- A bar at the top of your screen will show the real-time HEX and RGB values.
- Click once, and the color is automatically copied to your clipboard.
🌐 Method 3: The Native EyeDropper API
Modern web development has introduced a native EyeDropper API directly into Chromium browsers. This allows web applications to open your operating system's native color picker without you needing to install an extension.
If you use modern web design tools like Figma (in the browser), Canva, or advanced online color palette generators, clicking their color picker icon often triggers this API. The massive benefit here is that you can drag the eyedropper outside of the browser window and pick a color from your desktop wallpaper or another app entirely!
🎨 Extracted a Great Color?
Take that HEX code and plug it into our advanced Color Palette Generator to instantly create harmonious complementary and analogous schemes.
Open Palette Generator →💻 Method 4: Mac & Windows Native Tools
For Mac Users: Digital Color Meter
Apple includes a hidden, built-in tool specifically for this. Press Command + Space to open Spotlight and type Digital Color Meter. Hover your mouse over any webpage pixel, and press Shift + Command + C to copy the exact value to your clipboard.
For Windows Users: PowerToys
Microsoft offers an official suite called PowerToys. Once installed, simply press Windows + Shift + C anywhere. Your cursor becomes a magnifying glass. Click any pixel on any webpage, and a beautiful UI pops up giving you the HEX, RGB, and CMYK values.
📸 Method 5: The Screenshot Method (For Complex Sites)
Sometimes, a website is built using complex `canvas` elements, WebGL (3D graphics), or elements that disappear when you move your mouse away. In these cases, extensions and Inspect Element might fail.
- Take a high-resolution screenshot of the webpage (
PrtScnon Windows,Cmd+Shift+4on Mac). - Paste the image into a design software like Adobe Photoshop, Figma, or a free web tool like Photopea.
- Press
Ito open the Eyedropper tool in the software. - Click on the exact pixel in the screenshot to extract the color.
⚠️ Advanced: Handling CSS Variables & Opacity
When you use the "Inspect Element" method (Method 1), you might run into two modern web design hurdles that confuse beginners:
1. CSS Variables (Custom Properties)
Instead of seeing color: #FF0000;, you might see color: var(--primary-brand-color);. To find the actual HEX code, scroll down the Styles panel in DevTools to the :root section, where all variables are defined. There, you will find the actual HEX value mapped to that variable.
2. RGBA and Opacity Mismatches
If you use a color picker extension on a webpage and it tells you the background is `#F0F0F0` (Light Gray), but Inspect Element says the color is `#000000` (Black), who is lying?
Neither. The website is likely using a black background with CSS Opacity (e.g., background: rgba(0, 0, 0, 0.05);). The extension picks up the visual result of transparent black sitting on top of a white background. Always use Inspect Element if you want the exact mathematical code the developer wrote.
❓ Frequently Asked Questions
What is the best Chrome extension to pick colors from a webpage?
ColorZilla and Eye Dropper are the two most proven and popular Chrome extensions. They allow you to hover over any pixel on a webpage and instantly copy the HEX code to your clipboard.
How do I find the HEX code of a website background?
Right-click the background and select 'Inspect'. In the developer tools, look for the 'body' or main container tag in the HTML structure. Then, look at the 'Styles' tab for the 'background-color' CSS property to find the exact HEX code.
Why does the color picker show a different color than what I see?
This usually happens due to CSS Opacity (RGBA) or Blend Modes. If a color is semi-transparent (e.g., opacity: 0.5) placed over a white background, the actual HEX code will be darker than what your eye perceives on the screen. The picker grabs the flattened visual result.
Can I pick a color from an image on a webpage?
Yes. While "Inspect Element" only gives you HTML/CSS codes, using a browser extension like ColorZilla or the native OS EyeDropper allows you to extract colors directly from pixels inside images and videos rendered on the webpage.
How do I pick a color on a Mac without extensions?
Open the "Digital Color Meter" app from your Mac's Spotlight search. Hover over any part of the webpage and press Shift+Command+C to copy the exact color value as text without needing any third-party browser plugins.