Image color picker
Pick colors from any image: a magnifier shows the 5×5 pixel neighbourhood with coordinates, and you get HEX / RGB / HSL plus a 12-entry history. Paste images straight from the clipboard.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Images are processed locally in your browser and never uploaded
Pick an image first
HEX: — RGB: — HSL: — Coordinate: — Picked colors: None
Nothing picked yet — click the image to start.
No colors picked yet
Up to 12 colors are kept — click one to select it again.
What this tool does
- Sample a color off a design mock or screenshot and get it in HEX, RGB and HSL at once, ready to paste into CSS or a design tool.
- Verify a brand color against a screenshot: the magnifier shows the 5×5 pixel neighbourhood with the original coordinates so you can see how neighbouring gradient pixels differ.
- Collect several colors in a row — the history deduplicates automatically and keeps the last 12, which you can copy as a list or as CSS variables in one go.
- When someone sends a mock and asks "what color is this button", press ⌘/Ctrl + V to paste a clipboard screenshot and sample it without saving a file first.
Example
Input
Sampling the pixel rgb(12, 34, 255) from an image
Output
#0C22FF rgb(12, 34, 255) hsl(235, 100%, 52%)
HEX always comes out as six upper-case digits; HSL is converted from RGB and rounded, so a value converted back to RGB can differ by up to 1 from the original float. Coordinates are original image pixels, converted even when the preview is scaled down.
Frequently asked questions
Are my images uploaded?
No. Images are decoded in the browser with createImageBitmap, the pixel data is sampled in memory and nothing is sent anywhere — there is no backend endpoint at all. It works offline too.
Why does the sampled color differ slightly from what I see?
Two reasons. First, you sample a single pixel, and antialiased edges or gradients genuinely differ between neighbours — check the 5×5 grid in the magnifier and click the middle. Second, if the image carries a color profile such as Display P3, canvas interprets it as sRGB and the whole image can shift.
How is the history ordered?
Newest first, deduplicated: sampling the same color again moves it to the front instead of adding a duplicate, and at most 12 entries are kept. Copying the history yields one HEX per line, while copying CSS variables yields lines like --picked-1: #RRGGBB;.
What happens if I sample a transparent area?
The alpha channel is read too, and the RGB values come straight from that pixel, so a fully transparent region can report 0,0,0. Avoid sampling the blank space outside the image, or double-check what that area actually renders as.
Which image formats are supported?
Anything the browser can decode: PNG, JPEG, WebP, GIF (first frame only), BMP and AVIF in practice. If a file still reports that it cannot be decoded, the format is unsupported in your current browser — HEIC files are a common example.
Keywords：图片取色取色器color pickereyedropperhexrgbhsl拾色器放大镜取色