Color Picker from Image

What this tool does

The Color Picker from Image lets you sample the exact colour of any pixel in a photo or graphic. Load an image and hover over it to see a live preview of the colour under your cursor, shown as a hex code and RGB values. Click to lock that colour as your active selection, copy it to the clipboard, and build a short history of recently picked colours. The entire workflow runs in your browser using the HTML canvas API; nothing is uploaded or tracked.

Why you might need it

Matching colours between an image and a design is a recurring need across web development, graphic design, interior decoration, and print work. A brand logo may have been built from a specific palette that is nowhere documented, and you need the exact HEX to reproduce it faithfully on a web page. A product photo may have a subtle background tone that you want to apply as a section colour on an ecommerce page without it visually clashing. A UI designer might want to extract the accent colour from a screenshot of a competitor product to analyse it in a colour converter.

Without a dedicated tool, the alternatives are slow: a desktop application like Photoshop or GIMP works but requires opening the app and navigating several menus. A browser extension can do this but requires an install. This tool requires nothing — paste a URL into the address bar and drop your image in.

How to use it

1. Drop an image onto the upload area, or click to browse. Any common format works: JPEG, PNG, WebP, GIF, BMP.
2. The image appears on an interactive canvas. Move your cursor slowly over the area you want to sample — the colour swatch and values update live as you hover.
3. Click on the pixel you want to lock. The colour is now your active pick.
4. Use the Copy HEX button to copy the hex code (for CSS, Tailwind, Figma) or Copy RGB for CSS rgb() syntax.
5. Continue clicking to build a history of recently picked colours. Click any swatch in the history row to bring it back as the active colour.

Common pitfalls

The single most common confusion is display scaling. If your browser is zoomed in (more than 100%), or if you are on a high-DPI (Retina) display, the canvas may be displayed at a different size than its actual pixel count. This tool handles that correctly by computing the ratio between the displayed size and the native canvas size, so the sampled pixel always corresponds to the actual image pixel under your cursor — not the CSS pixel.

Another pitfall is JPEG compression. JPEG is lossy, meaning it introduces colour variations around edges and in flat areas during compression. If you click what looks like a uniform grey region and get a slightly different shade each time, that is normal — the JPEG codec has stored slightly different values in adjacent pixels even though they looked the same before compression. For perfectly consistent flat colours, work with PNG originals where possible.

Tips for best results

For web development, always pick colours from images that are the actual assets you will use on the page — not a scaled or re-saved copy — to avoid the colour shift that re-encoding introduces. Zoom into the image on your desktop image editor first if you need to pick a colour from a very small area; then screenshot that zoomed view and drop the screenshot into the colour picker for easier clicking.

When extracting brand colours from a logo, look for the flattest, most saturated region of each colour. Anti-aliased edges and shadows will give you blended values that are not the pure brand colour. Once you have several picks in the history row, check the companion Color Converter tool to convert your HEX values into other formats (HSL, HSV, CMYK) or to build variations of the same hue for a consistent design system.