Developer
Color Picker
Pick a color from any image in your browser, or straight off the screen where your browser allows it — with the value in four formats and a palette you keep.
This browser does not offer a screen color picker, so the button for it is not shown — Safari and Firefox have not shipped one. The image path above works everywhere: take a screenshot of whatever you wanted to sample and choose it here, and you get the same value in two steps instead of one.
Choose an image above, then click anywhere on it. The file is read on this device and never uploaded.
Palette
Nothing saved yet. Pick a color above and press Save to palette — it holds up to 24.
Choose an image and click on it, or press the screen button and point at anything your display is showing. Either way you get one pixel's colour, written out in the four formats a stylesheet accepts, with a Copy button on each and a palette to keep the ones worth keeping. This page is about getting a colour OUT of something — for what the four formats mean and how they convert between each other, the HEX to RGB converter is the tool with that job.
Color picker from image: how the sampling works
The file you choose is drawn into a canvas at its own resolution and then scaled down by the browser purely for display. A click is measured against the displayed size and mapped back through that ratio to a source pixel, so the value you get is the byte that was in the file. That distinction is the whole difference between a picker that works and one that quietly does not: sampling from a resized copy returns an average of neighbouring pixels invented by the browser's resampler, and the number it hands back looks entirely reasonable.
Two behaviours worth knowing. Moving the pointer previews without committing, which is how you hunt for the darkest point of a shadow or the exact centre of a gradient band. And the stage takes keyboard focus, so the arrow keys walk the sample point a pixel at a time with Enter to commit — a mouse is not a requirement here.
Images with a longest edge over 4096 pixels are reduced before drawing, because holding a 60-megapixel photograph as raw pixels will exhaust a phone. When that happens the tool says so in the line under the stage, because at that point the colours genuinely have been resampled and you should know before you trust one.
Color picker from screen: what the browser eyedropper can reach
On a Chromium browser the screen button opens the browser's own magnifier, which can sample any pixel your display is showing — a native application, a PDF reader, a paused video, the desktop behind everything. The page itself never sees your screen. The browser draws the magnifier, you choose the pixel, and a single colour value comes back; nothing else crosses the boundary, which is why no permission prompt is involved.
Safari and Firefox have not implemented it, so on those browsers the button is absent rather than disabled and a line of text explains what happened. There is no way around this from a web page and anything claiming otherwise is either running as a browser extension with permission to read your tabs, or is wrong.
Closing the magnifier without choosing is a cancellation and leaves whatever you had picked before untouched — no error, no cleared swatch.
Get the hex code from a screenshot
This is the commonest real use of the tool and it is worth being specific about. Take a screenshot of the thing you want the colour of, choose it above, and click. The route through a screenshot is exact in a way a photograph is not, because a screenshot is a lossless capture of pixels that were already digital — provided you save it as PNG. A screenshot saved as JPEG has been through the same compression that makes photographs unreliable, so if your operating system offers a choice, take PNG.
One trap specific to screenshots is worth naming: on a display with a scale factor, a screenshot is often captured at twice the logical resolution and then shown to you at half size. That is harmless for sampling here, because the canvas holds the captured pixels and the mapping accounts for the display scaling, but it does mean the coordinates in the readout are the ones in the captured file rather than the ones you would measure on screen.
Build a color palette from a photo
Press Save to palette and the current colour joins a strip that holds up to twenty-four. The strip is not generated for you — there is no automatic extraction of dominant colours here, deliberately, because an algorithm's idea of a photograph's five main colours is almost never the five somebody actually wanted. Sampling by hand takes about ten seconds and gets the ones you meant.
Clicking a saved swatch makes it the current colour again, so it comes back in all four formats with its Copy buttons; each swatch carries its own Remove control. Saving a colour that is already in the palette does nothing rather than moving it to the front, which is what lets you build a strip in a deliberate order — light to dark, say — and keep it that way.
Signed in, the palette follows you to another device. Signed out, it stays on this one. The tool does not behave differently in the two cases and never hides the feature behind an account; the only difference is a line of text telling you where it went.
Your image is never uploaded, and your palette is the one exception
The image is read from disk with an object URL, decoded by the browser, drawn into a canvas in this tab, and the URL released the moment the decode finishes; the pixel array lives in memory until you remove the image or close the tab. It is never uploaded, never queued, and never processed on a server. Sampling, converting and previewing are all arithmetic in this tab.
The palette is the exception, and it is worth stating precisely rather than glossing. If you are signed in, saving a swatch, removing one or clearing the strip each sends a request — carrying the list of colour values and nothing else — so the palette can follow you to another device, and the page asks the server for that list once when it loads. Signed out, or with no account on this site at all, those same actions write to your own browser's storage and no request is made. Either way the image itself is never part of it: what can leave this device is a short list of colours you deliberately saved, and nothing more.
That distinction matters more than it might sound here, because the files people bring to a colour picker are frequently screenshots — of an unreleased design, an internal dashboard, a client's site before launch. A picker that posted those somewhere to sample them would be a leak with a friendly interface, and several online ones do exactly that. Open your browser's Network tab while you sample: you will see nothing at all until you touch the palette.
Questions
- How do I pick a color from an image online?
- Choose the file with the picker above and click anywhere on it. The image is drawn into a canvas on your own device at its full resolution, and a click is mapped back through the display scaling to the exact source pixel underneath the pointer, so what you get is the byte that was in the file rather than an average of its neighbours. Moving the pointer without clicking previews the reading, which is useful for hunting the darkest part of a gradient; clicking commits it, and only a committed reading can be copied or saved. If you have no mouse, the stage takes keyboard focus and the arrow keys walk the sample point one pixel at a time — hold shift for ten — with Enter to commit.
- Why does the eyedropper not work in Safari or Firefox?
- Because neither browser has implemented the screen-picking API. It is a Chromium feature — Chrome, Edge, Opera, Brave and Arc all have it; Safari and Firefox have not shipped it at the time of writing, and there is no polyfill, because no amount of JavaScript can grant a web page permission to read pixels outside its own tab. That is the whole security point of the API: the browser itself puts the magnifier on screen and hands back one value the user chose, so the page never sees anything else. Rather than showing you a greyed-out button with no explanation, this tool leaves the control out entirely on browsers that lack it and says so. Take a screenshot instead and choose it above; you land in the same place one step later.
- Can I pick a color from anywhere on my screen, including other apps?
- Yes, on a Chromium browser, and that is exactly what the screen-picking button does — the magnifier it opens is drawn by the browser itself and can reach any pixel your display is showing, including another application's window, a video, or your desktop wallpaper. The page never sees your screen: the browser returns a single color value for the pixel you clicked and nothing else, which is why the feature needs no permission prompt. Two practical limits. On multi-monitor setups it works across all attached displays but colors sampled from a second monitor with a different profile can read slightly differently from the same content on the first. And it returns one pixel, not an average, so on a gradient or an anti-aliased edge you want the middle of a flat area rather than a boundary.
- Why is the color I picked from a JPEG slightly different from the original?
- Almost always because JPEG threw it away. JPEG is a lossy format that stores color at lower resolution than brightness — chroma subsampling — and it also works in 8x8 blocks, so a flat area of brand color comes back out with its pixels varying by a few units in each channel, and pixels near a hard edge vary by a lot more. Sample the middle of a large flat area rather than a thin line or a boundary and you will usually land within one or two units of the intended value. If exactness matters, get the color from a PNG, an SVG or the source file rather than from a compressed photograph — and if you are recovering a brand color from a logo, the safest sample is the largest uninterrupted block of it in the image.
- Does this color picker upload my image anywhere?
- No, and there is no code path here that could. The file you choose is read straight off your disk through the browser's own object-URL mechanism, drawn into a canvas in this tab, and the URL revoked as soon as the decode finishes. Choosing an image, sampling it and copying a value make no network request at all — you can confirm that yourself by opening your browser's developer tools, switching to the Network tab and watching it stay empty as you sample. One thing does leave this device, and only one: the palette. If you are signed in, saving, removing or clearing a swatch sends the list of saved color values so it can follow you to another device, and the page fetches that list once on load; signed out, all of it stays in your own browser and nothing is sent. The image is never part of that — it is never stored, never sent, and gone from memory when you remove it or close the tab.
- How many colors can I save in the palette?
- Twenty-four. That is a deliberate cap rather than a technical ceiling: a palette is something you curate, and a list that grows without limit stops being one — past about two dozen swatches you cannot recognise an entry at a glance, which is the only thing a palette is for. Saving a color already in the palette leaves it exactly where it is rather than jumping it to the front, so an order you built on purpose survives. If you are signed in the palette follows you between devices; if you are not, it stays on this one, and the tool behaves identically either way.