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 groups the image's colours into clusters and shows the main ones with the share of the image each covers. It groups them by how different they look(in the OKLab colour space), merges near-duplicates, and shows a real pixel from each group rather than a muddy average. That's useful for building a theme from a photo or matching a brand's colours from a logo — copy one swatch, or the whole palette as CSS variables, Tailwind or JSON.
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 colour; use the magnifier (and arrow keys) 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 magnifier to line up the crosshair, then click to lock the colour. Arrow keys then move one pixel at a time (Shift moves ten).
Why does the colour change from pixel to pixel in a photo?
Photos are full of noise and JPEG artefacts, so neighbouring pixels differ slightly. Set Sample to 3×3 or 5×5 to average a small area and get the colour you actually see.
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. Choose how many colours you want (3 to 16) and the tool shows the dominant ones with their share of the image. Copy the palette as a HEX list, CSS variables, Tailwind v4 theme, SCSS or JSON.
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.