To pick a color from a photo, click any pixel in the picture and read the exact HEX and RGB values the tool returns — a six-digit code like #3b82f6 and a triplet like rgb(59, 130, 246) — then copy the HEX with one tap for use in CSS, a design file, or a brand guide. A purpose-built color picker draws the image to a canvas inside your browser, reads the pixel under your cursor, and shows you both codes at once alongside a live swatch so you can confirm the shade before you use it anywhere. The whole process takes a single click per color, leaves the file on your device, and works with the common formats your computer or phone already opens, including PNG, JPEG, WebP, and GIF. Because the picture is rendered to a canvas at full fidelity, the pixel you click is the pixel that gets read, even on a phone where the image is scaled down to fit the screen — the picker maps your tap back to the underlying image, so the color stays accurate no matter the zoom level or display size.
What "picking a color" actually returns
When you pick a color from a photo, you are reading the raw pixel value at one exact spot in the picture. That value can be written down in two common ways, and a good picker shows you both side by side so you never have to convert by hand.
| Format | Example | Where you paste it |
|---|---|---|
| HEX | #3b82f6 | CSS, HTML, design tools, Figma swatches |
| RGB | rgb(59, 130, 246) | JavaScript, design tools, accessibility reports |
HEX packs the three channels — red, green, and blue — into a six-character string after a hash sign, while RGB writes each channel as a decimal number from 0 to 255 inside an rgb() function. The two codes describe the same color, just in different notation. Designers usually paste HEX straight into a style sheet or a Figma swatch, while developers often reach for RGB when they want to do math on a color in code, like dimming a button on hover or computing contrast.
You can convert between the two by hand when you know the formula: split the HEX into three pairs of characters, convert each pair from base 16 to base 10, and you get the RGB triplet. For #3b82f6, the math works out as 3b = 3×16 + 11 = 59 for red, 82 = 8×16 + 2 = 130 for green, and f6 = 15×16 + 6 = 246 for blue, giving rgb(59, 130, 246). A picker removes that step entirely — it gives you both codes on the same screen, ready to copy.
Pick a color from a photo in four clicks
The fastest path from a picture on your device to a usable color code is a tool that loads the image locally and reads the pixel under your cursor. The Image Color Picker is built for exactly that moment: open it, drop in a photo, and click.
- Click Browse files and choose an image from your device — it loads instantly and never leaves your browser.
- Move your cursor over the picture to preview colors in real time, then click any pixel to lock in the one you want.
- Read the exact HEX and RGB values shown next to the live color swatch.
- Tap Copy to put the HEX code on your clipboard, or click another pixel to compare — your recent colors are saved in the history strip.
That is the whole workflow. There is no account, no upload, and no waiting for a remote service to process the file — the image renders on a canvas in the same tab, so you can move from spotting a color to having its code in about a second. The history strip keeps your most recent picks visible while you sample more pixels, which is what lets you build a small palette of related shades from one picture without losing track of the colors you already grabbed.
Where a sampled color actually gets used
Sampling a color out of an image is rarely the end goal on its own; the value usually travels somewhere next. A few common destinations are worth naming because they shape which format you copy.
| Task | What you sample | Where the code lands |
|---|---|---|
| Match a brand palette | Primary and accent colors from a logo | Style sheet, brand guide, Figma swatch library |
| Rebuild a reference in CSS | Background, button, border, and gradient stops | CSS variables or an inline style block |
| Theme a flat product photo | Fabric, packaging, or background shades | Theme tokens, marketing page accents |
| Check photo editing choices | Skin tone, sky gradient, or a neutral gray | White balance reference, retouching notes |
Once you have a hex code on your clipboard, you can drop it into a token system, paste it into a design tool's color field, or send it to a teammate in chat. If you find yourself wanting every dominant color in a picture rather than just one pixel, a palette extractor is the natural next step — see our guide on extracting a color palette from any image in your browser for that workflow. The picker covers the "I need this exact shade" case, while a palette tool covers the "show me everything that matters in this photo" case.
Why the picker still reads the right pixel on a phone
Images on a phone or a small laptop window are almost never shown at native size — the browser scales them down so the whole picture fits the screen. A naive color picker reads whatever pixel is under your finger after that scaling, which is usually the wrong color because the tap landed between source pixels. A picker that draws the image to a canvas and maps the click position back to the original image reads the actual pixel you intended. That distinction is what lets you tap a tiny logo mark on a phone screen and still get the right hex back instead of an averaged shade of the surrounding area.
The same logic applies at any zoom level: whether the picture is shown at 25% or 200%, the click is translated into coordinates in the original image before the pixel is read. You can resize the browser window, scroll, or switch devices mid-session and still expect the same color from the same spot in the picture. The picker does not care that the rendered image is smaller than the file — it cares about the pixel coordinates in the source.
Privacy, file formats, and what stays on your device
A color picker that uploads your image to a remote server introduces a few problems worth avoiding. Uploads take time on slow connections, fail on very large files, and hand a private asset to a third party you may not trust with unreleased product shots or confidential mockups. A picker that runs entirely in the browser skips all three issues: the file opens through the standard file input, decodes inside a canvas, and never leaves the tab.
The Image Color Picker works with the formats your browser already understands, including PNG, JPEG, WebP, and GIF. You can drop in a flat product photo from a client, a screenshot of a competitor's page, a scanned page from a magazine, or a frame pulled from an animated GIF, and start picking colors right away. When you close the tab, the canvas is gone and so is any trace of the image on the remote side — there is no cloud copy because no copy was ever made.
The same local processing also explains why there is no file-size cap: the picture is decoded on your own hardware, so the only limit is what your device can render. For very large source files, the canvas may show a scaled view for speed, but the picker still maps your click back to the original pixel, so the value you read is the value that is actually in the file. That is also why no sign-in is needed — there is no account to associate the work with, because nothing about the picture leaves your device.
Tips for picking a color that holds up
A few small habits make sampled colors more reliable in real projects, especially when the result will end up in a style sheet or a brand spec.
- Zoom in before you click on small details like a logo mark or a button outline — the pixel you want is often only a few image pixels wide and easy to miss at full view.
- Pick the lightest and darkest parts of a reference separately if you plan to build a gradient, so each stop is exactly the shade you intend rather than an averaged middle value.
- Sample at least two or three nearby pixels when you are matching skin tones or other subtle gradients, since compression artifacts can shift a single pixel by a noticeable amount.
- Keep the history strip visible while you work — clicking another pixel adds a new swatch without losing the previous one, which makes side-by-side comparison much faster than re-sampling.
- Paste the HEX code straight into your destination — a CSS variable, a Figma color style, a Notion doc, or a Slack message — instead of writing it down by hand, since one transposed digit gives a different color.
The picker is the step that turns "I can almost see the color" into "I have the exact code." Once the value is on your clipboard, the rest of the work is plain design or development: build the swatch, set the variable, drop it into the file, and move on to the next color.