How to Use a Color Picker to Find Colors from Any Pixel
Quick Answer
To pick a color: open the Color Picker, upload an image (or use the screen eyedropper), click on the pixel whose color you want, and the HEX, RGB, and HSL values appear. All processing happens locally — your image is never uploaded.
Introduction
A color picker (also called an eyedropper) lets you find the exact color of a pixel. This is essential for matching brand colors, sampling colors from images, or building a color palette from a photo. Browser-based color pickers can read colors from uploaded images using the Canvas API, and the browser's built-in EyeDropper API can pick colors from anywhere on screen. This guide shows you how to use a color picker in your browser.
Step by Step
-
Open the Color Picker tool
Go to the Color Picker tool page. The tool supports picking colors from uploaded images and, in supported browsers, from anywhere on screen via the EyeDropper API.
-
Choose your source
To pick from an image: upload or drag-and-drop an image. To pick from the screen (Chrome/Edge only): click the 'Pick from screen' button, then click anywhere on your screen.
-
Click the pixel to sample
For image picking, move your cursor over the image and click the pixel whose color you want. The tool reads the pixel color from the canvas using getImageData(). A magnifier may help you select the exact pixel.
-
Read the color values
The tool displays the picked color in HEX, RGB, and HSL formats, along with a swatch. The values update instantly as you move the cursor.
-
Copy the color
Click Copy next to any format to copy the color value to your clipboard. Use it in your CSS, design tool, or application.
Examples
Pick a brand color from a logo
Input: logo.png, click on the brand color pixel
Output: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
Sample a color from a photo
Input: photo.jpg, click on a sky pixel
Output: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
Pick from screen (Chrome/Edge)
Input: Click 'Pick from screen', then click any pixel on your display
Output: HEX value of that pixel, e.g., #ff5733
Common Problems
- Anti-aliasing blends colors at edges —pixels on the edge between two colors are a blend. Sample from the center of a solid color area for accuracy.
- EyeDropper API not supported —the screen picker requires Chrome 95+ or Edge 95+. Firefox and Safari do not support it; use the image upload method instead.
- JPEG compression alters colors —JPEG lossy compression changes pixel colors slightly. For exact brand colors, use a PNG or the original vector source.
- Color profile differences —images with embedded color profiles (ICC) may display differently than their raw pixel values suggest.
Tips
- Use the magnifier to select the exact pixel —at high zoom, you can pick a single precise pixel rather than a blended edge.
- Sample multiple pixels from a solid area and average them if compression has introduced noise —this gives a more representative color.
- Use the EyeDropper API (Chrome/Edge) to pick colors from any application, not just images in the browser.
- Use our Color Picker for instant, private color sampling —your images never leave your browser.