You see a stunning color on a YouTube video, a desktop app, or a beautiful photograph, and you want to use it in your own design. The problem? You can't just guess a color. To perfectly replicate it, you need to know exactly how to find the color code on your screen.
Finding a color code (usually a 6-digit HEX code or an RGB value) is incredibly easy if you know where to look. Depending on whether you are using Windows, macOS, or a web browser, there are powerful built-in tools (like PowerToys or Digital Color Meter) that turn your mouse cursor into a digital eyedropper.
In this guide, we will break down the fastest methods to extract colors across all platforms. Don't want to install anything? Take a screenshot (Win+Shift+S or Cmd+Shift+4) and paste it directly into our interactive tool below to find out the exact color code instantly!
👁️ Try It: Screenshot Color Analyzer
Privacy Note: Your screenshot never leaves your computer. The color extraction happens entirely locally in your browser.
🪟 Windows Methods: Finding Color Codes on PC
Method 1: Microsoft PowerToys (Best)
Download the free PowerToys app from the Microsoft Store. Open its settings and enable the "Color Picker". Now, anytime you want to find a color, press Windows + Shift + C. Your mouse will become an eyedropper. Click any pixel, and a popup will give you the HEX and RGB code.
Method 2: MS Paint (No Install Required)
Take a screenshot of your screen by pressing Windows + Shift + S. Open the classic Paint app and paste (Ctrl + V). Select the "Color picker" tool (it looks like an eyedropper) from the toolbar and click the color you want. Then click "Edit colors" to view its exact Red, Green, and Blue (RGB) values.
🍎 Mac Methods: Finding Color Codes on macOS
Apple users are lucky—macOS has a powerful, completely hidden utility built right into the operating system designed specifically for finding color codes on the screen.
Method 1: Digital Color Meter (Built-in)
Press Cmd + Space to open Spotlight Search, type Digital Color Meter, and hit Enter. A small window will appear. As you move your mouse anywhere on your screen, it will show the live RGB values. To copy the exact color as text, hover over the color and press Shift + Cmd + C.
Method 2: The Screenshot to Preview Method
If you prefer to capture the color for later, press Cmd + Shift + 4 to take a selective screenshot. Open that screenshot in the default Preview app. Open the Markup toolbar (the pencil icon), click the color selection dropdown, and use the eyedropper tool icon to sample the exact color.
🌐 Browser Methods: Extracting Web Colors
1. Chrome DevTools (Inspect Element)
Right-click the element you want the color of and click Inspect. In the developer panel that opens on the right, look under the Styles tab for color: or background-color:. You will see the exact HEX code the developer used, accompanied by a tiny colored square.
2. The Modern EyeDropper API
Modern Chromium browsers (Chrome, Edge, Opera) support the Native EyeDropper API. If you clicked the "Native Browser Eyedropper" button in our tool above, you saw this in action. It allows a website to trigger a native magnifying glass that can pick colors from anywhere on your monitor.
3. Browser Extensions (ColorZilla)
If you don't want to dig through code, install the ColorZilla Chrome extension. Once installed, click its icon, hover over any image or text on a webpage, and click once to copy the HEX code instantly to your clipboard.
🎨 Found Your Perfect HEX Code?
Take the color you just extracted and plug it into our advanced Color Palette Generator to create matching complementary and analogous schemes for your next project.
Open Palette Generator →⚠️ Why Does My Picked Color Look Different?
You followed the steps, picked the perfect color from a website, pasted the HEX code into Photoshop, and... it looks slightly dull or shifted. Why did this happen?
- Color Profile Mismatches: Most websites operate in the standard sRGB color space. However, modern MacBooks and iPhones use the Display P3 color space, which is much more vibrant. If you pick a highly saturated color on a P3 monitor and paste it into an sRGB canvas, the color gets "clipped" and looks duller.
- Image Compression (JPEG Artifacts): If you take a screenshot and save it as a JPEG, the image compression creates tiny, invisible blocks of slightly different colors. Depending on the exact pixel your eyedropper hits, the HEX code might be slightly off. Always save screenshots as PNGs when color-picking!
- CSS Opacity: If you use a color picker on a webpage with a semi-transparent black overlay (
rgba(0,0,0,0.5)) sitting on top of a red background, the tool will give you a dark maroon color. The tool picks the flattened visual result, not the original underlying code.
❓ Frequently Asked Questions
Is there a built-in color picker on Mac?
Yes. Mac includes a native utility called "Digital Color Meter". You can open it via Spotlight Search, hover over any pixel on your screen, and press Shift+Command+C to copy the HEX or RGB color code.
How do I find a color code from an image?
Take a screenshot of the image, then paste it into an online image color picker tool (like the one above), MS Paint, or Photoshop. Use the eyedropper tool to click the specific pixel and reveal the HEX code.
Why is the HEX code I picked different from the original?
This usually occurs due to color profile mismatches (like viewing an sRGB image on a Display P3 monitor), or because the image was compressed as a JPEG, which alters individual pixel colors to save space. It can also be due to transparent CSS overlays.
Can I pick a color outside my web browser?
Browser extensions (like ColorZilla) usually cannot pick colors outside the browser window due to security sandboxing. However, using the native EyeDropper API (in Chrome), Windows PowerToys, or Mac Digital Color Meter allows you to pick colors from your desktop, Spotify, or any other app.
What is the shortcut to find a color on Windows 10?
If you have Microsoft PowerToys installed, the default shortcut to open the system-wide color picker is Windows Key + Shift + C. This will instantly turn your cursor into a magnifying glass to pick any color on your screen.