Advertisement
Guide
About the Image Color Picker
This tool lets you pull exact colors out of any image. Upload a photo, screenshot, logo, or illustration, then hover to preview and click to lock a pixel — you instantly get its HEX, RGB, and HSLvalues, ready to copy into your CSS, design tool, or code. A zoom magnifier helps you land on the precise pixel, and it also extracts the image's dominant colors as a palette.
Everything runs locally using the browser's Canvas API — your image is never uploaded, so it's safe to use with private mockups and screenshots.
HEX, RGB, and HSL — which to copy
All three describe the same color. HEX (#3b82f6) is the most common in CSS and design handoffs. RGB is handy when you need channels or an alpha value. HSLis the easiest to tweak by hand — adjust the lightness to make a shade lighter or darker while keeping the same hue. Copy whichever fits where you're pasting.
Extracting a palette from an image
Beyond single pixels, the tool analyzes the whole image and surfaces its most common colors as a palette. That's useful for building a theme from a photo, matching a brand's colors from a logo, or getting a coordinated set of colors for a design. Click any palette swatch to copy it.
The eyedropper — pick from anywhere
On supported browsers (Chrome and Edge), an extra eyedropper button lets you sample a color from anywhere on your screen, not just the uploaded image — handy for grabbing a color out of another app or window. Where the native eyedropper isn't available, the canvas picker works everywhere.
How to use it
- 1Drop in or select an image.
- 2Hover to preview a color; use the magnifier to target the exact pixel.
- 3Click to lock the color, then copy its HEX, RGB, or HSL.
- 4Or click a palette swatch to grab one of the image's dominant colors.
Frequently asked questions
Does picking a color upload my image?
No. The image is loaded into a canvas in your browser and read locally, so it never leaves your device. It is safe for private screenshots and mockups.
How do I pick the exact pixel I want?
Move your cursor over the image and use the zoom magnifier that appears to line up the crosshair on the precise pixel, then click to lock that color.
What color formats does it give me?
HEX, RGB, and HSL for every picked color. HEX is best for CSS, RGB when you need channels, and HSL when you want to adjust lightness or saturation.
Can I get a whole palette from a photo?
Yes. The tool analyzes the image and shows its dominant colors as clickable swatches, which is great for building a theme from an image.
Why can it only read images I upload?
Browsers block reading pixel data from images loaded off other websites (cross-origin) for security. Uploading your own file avoids that restriction entirely.