ColorKitFree pixel eyedropper for images
Image color picker, accurate to one pixel
Open an image here and clicking any pixel returns its exact color — free, no signup, and the file is decoded by your own browser rather than sent anywhere. An 8× loupe magnifies fifteen pixels across so you land on the one you meant, the arrow keys step the crosshair a pixel at a time when the pointer is too coarse, and a 3×3 to 9×9 mean is there for pixels sitting in compression noise. Files are sampled at their own resolution up to 4,096 pixels on the long edge, and every reading arrives as HEX, rgb() and hsl() with the coordinate it came from.
- 100% free
- No signup
- 8× loupe
- 1×1 to 9×9 sampling
- Reads the file, not the preview
Drop a PNG, JPEG, WebP, GIF, AVIF or BMP here — or open one from disk.
Press Ctrl+V anywhere on the page to drop in a screenshot straight from the clipboard — no need to click the field first.
Nothing sampled yet
—
Load an image, then move the pointer over it: the loupe magnifies 15 pixels across at 8× and outlines the square the average is taken from.
How to pick a color out of an image
Load, aim, sample — and the hex is on your clipboard with the coordinate it came from.
Put the image in front of the crosshair
Drag a file onto the dashed frame, press the button to open one from disk, or copy a screenshot and paste it — a region grab from ⇧⌘4 or Win+Shift+S goes straight in without ever becoming a file on disk. PNG, JPEG, WebP, GIF, AVIF and BMP all work because the decoding is the browser's own; an SVG needs a width and height attribute before it will rasterize.
Aim, and check the loupe before you commit
The magnifier follows the pointer, blows up a 15-pixel-wide window to 8× with no smoothing, and draws a box around the exact square that will be averaged. Antialiased type and one-pixel borders are where aiming by eye fails, so this is the moment to look: the pixel you want is often the second one in from the edge. With the canvas focused, the arrow keys move one pixel per press and Shift plus an arrow moves ten.
Sample, widen if the value looks wrong, copy
Click or press Enter and the reading locks into the list on the right as HEX, rgb() and hsl(), tagged with the coordinates it came from. If consecutive clicks on what looks like flat color return values a few points apart, the area is not flat — switch from 1×1 to 5×5 and the 25-pixel mean settles down. Each of the last 12 picks keeps its own copy button, and clicking a swatch sends the crosshair back to the pixel it came from.
Technical specifications
| Accepted images | PNG, JPEG, WebP, GIF, AVIF and BMP — whatever the browser decodes; SVG works when the file declares a width and height |
|---|---|
| Sampling resolution | The file's own pixels up to 4,096 px on the long edge; larger images are drawn down to that first and the reduced size is shown under the frame |
| Sample area | 1×1, 3×3, 5×5 or 9×9 — 1, 9, 25 or 81 pixels in the mean |
| Averaging space | Linear light by default, so channels are de-gamma'd before they are added; an encoded-byte mean is one click away for parity with desktop editors |
| Magnifier | 8×, over a 15-pixel window, nearest-neighbor, with the sample square outlined |
| Keyboard control | Tab to the canvas, arrow keys move 1 px, Shift+arrow moves 10 px, Enter or Space samples |
| Read-outs | HEX, rgb(), hsl(), pixel alpha when it is below 100%, the x,y coordinate, and the nearest of the 148 CSS keywords with its ΔE |
| Pick history | The last 12 distinct colors, held in this tab's memory only — a reload clears them and nothing is written to disk |
Frequently asked questions
Why does the hex here differ from what Photoshop reads on the same photo?
Almost always because of the color profile embedded in the file. A shot from an iPhone or a modern mirrorless camera is tagged Display P3 or Adobe RGB, and drawing it into an HTML canvas converts it into sRGB first, so a vivid red that reads 255,45,20 in a P3-aware application comes back nearer 255,60,45 here. Photoshop is showing you the number in the document's own space; this page always answers in sRGB, which is the space your CSS will be interpreted in anyway.
Why does a pixel on a hard edge in a JPEG show a color that is not in the picture?
JPEG stores color at half resolution in each direction, so the chroma of your pixel is interpolated from its neighbors. The format keeps full detail for brightness and subsamples the two color channels at 4:2:0, then the 8×8 DCT blocks add ringing around any sharp boundary. The result is a fringe of invented colors one to three pixels wide along every edge. Move a few pixels into the flat area, or take a 5×5 mean and let the fringe average out.
Does the tool read the pixel I see on screen or the pixel in the file?
The pixel in the file. The image is drawn at its own resolution and the click position is mapped back through that scale, so a 4000-pixel-wide photo displayed 900 pixels wide is still sampled at 4000. This matters because the preview you are looking at has been through the browser's downscaling filter, which blends four or five real pixels into every one you can see — picking off the preview would hand you a blend that exists nowhere in the file.
What does the linear-light option do to a 3×3 average?
It undoes the sRGB transfer curve before adding the channels up, which changes the answer by a lot on high-contrast patches. Averaging one black and one white pixel by their stored bytes gives 128, or #808080; averaging the light they actually emit and re-encoding gives 188, or #bcbcbc, and the second is what the two pixels look like when your eye blurs them together at arm's length. Image editors average the encoded bytes, so switch to Encoded bytes when you need a number that matches a colleague's eyedropper rather than the physically correct one.
Can I pick a color from a transparent PNG?
Yes, and the read-out tells you the alpha instead of quietly compositing it. Fully transparent pixels still carry RGB values in the file — often white, often black, sometimes leftover garbage from whatever the exporter had in the buffer — so a tool that flattens without saying so returns a color the artwork does not contain. Anything below 100% opacity is labelled with its alpha percentage, and the swatch sits on a checkerboard so you can see the difference between 5% and 0%.
Is there a limit on how big an image can be?
Nothing is uploaded, so there is no file-size ceiling, but images over 4,096 pixels on the long edge are drawn down to that before sampling and the page says so under the frame. The cap exists because mobile Safari silently returns blank pixel data above roughly 16.7 million canvas pixels, and blank data would produce a confident, wrong black. A 24-megapixel photo therefore gets sampled at about 4,096 × 2,730, which is still finer than the display you are aiming on.
Can I eyedrop a color from a website instead of an image file?
Screenshot the page and paste it here, which takes two keystrokes and works in every browser. Chrome, Edge and Opera also expose the EyeDropper API, and the picker on the ColorKit home page uses it to lift a color from any window on your desktop without a screenshot at all — Firefox and Safari have not shipped it, so on those the screenshot route is the only one.
About lifting a color out of a bitmap
The hard part of this job was never the arithmetic — a pixel is three bytes and there is nothing to compute. The hard part is agreeing on which pixel. A photograph shown at a third of its size has already been through a downscaling filter that merges four or five real pixels into each one you can see, a retina display doubles that again, and the border you are trying to sample is usually two pixels of blend with no single "real" color anywhere in it. Everything on this page exists to close that gap: the magnifier, the pixel-by-pixel arrow stepping, the outlined sample square, and the decision to map every click back to the file's own grid. If the question you actually have is which colors the whole picture is built from, that is a different operation and it lives on color from image, which clusters the pixels instead of naming one.
The second trap is the average itself. Widening the sample is the standard cure for noise, and nearly every eyedropper implements it by adding up the stored bytes and dividing — which is wrong in a way that shows up most on exactly the high-contrast patches people widen the sample for. Those bytes are gamma-encoded: the value 128 does not represent half the light of 255, it represents about 21% of it. Adding encoded values therefore biases the result dark. This page de-gamma's each channel, averages in linear light and re-encodes, and still keeps the encoded mean one click away, because when you are reconciling a number with a colleague reading the same patch in an image editor you need the number their tool produces, not the correct one.
Third, color management. A canvas answers in sRGB, so a Display P3 photo is converted on the way in and its most saturated reds and greens land a few points off what a profile-aware desktop application reports. That is the right trade for web work — sRGB is the space a stylesheet is read in — but it is worth knowing before you argue with a print supplier about a number. Once you have the value, the nearest CSS keyword is shown with its Lab distance so you can tell a genuine named color from something merely close to one, and a sampled brand color is a normal starting point for its opposite on the wheel or for a walk around the full 360°. Vector artwork has no pixels to sample at all until something rasterizes it, which is what SVG to PNG is for.
Where your image is opened
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The picture is handed to the canvas through an object URL that is released the moment it has been drawn, so it exists only as pixels in this tab. Choosing another image replaces them, closing the tab discards them, and the pick list has no storage behind it at all.