How to Get the Exact Hex Code from Any Image

Color picker from image works on any JPG, PNG, WebP, GIF or BMP file, up to 25MB, and never uploads it - the image is decoded and read entirely inside the browser's own canvas.

1. Load the image

Drop a file onto the dropzone, click to choose one, or paste directly from the clipboard - all three load paths work. Once loaded, the image draws onto an interactive canvas (scaled to fit the space it sits in, at most 900px wide and 620px tall, so the whole thing stays visible on screen) and a toast confirms it's ready to pick from.

2. Hover to preview before committing

Moving the cursor over the image updates a live readout - hex, RGB and HSL values, all three at once - and a small docked magnifier that zooms in on the pixels right under the cursor, so a flat area of colour and a blended edge look visibly different before anything is picked. Nothing is copied or saved yet at this stage; hovering is free to explore.

3. Click, or use the keyboard, to pick and copy

A click on any point commits that exact pixel: its hex value is copied to the clipboard automatically, a toast confirms it, and a new swatch is added to the top of a running pick history below the image. The canvas is also fully keyboard-operable - Tab to focus it, then arrow keys move a one-pixel-at-a-time virtual cursor (the live readout updates as it moves, same as hovering with a mouse), and Enter or Space commits the pick at that position, exactly like a click.

4. Use "Pick from screen" for anything outside the image

In browsers that support the native EyeDropper API (Chromium-based browsers, as of this writing - not yet Firefox or Safari), a "Pick from screen" button samples any pixel visible anywhere on the actual screen, not just inside the uploaded image - useful for a colour in a browser tab, another app window, or anywhere else on the desktop. It feeds into the exact same pick history as an in-image click, so both methods end up in one combined list rather than two separate ones.

On a touchscreen

A mouse can hover before it commits, showing the magnifier and the live readout before anything is picked. A finger on a touchscreen doesn't have a hover state to speak of, so the tool adapts the same interaction to touch instead: a touch-and-hold on the image brings up the magnifier at that point first, and a tap commits the pick, mirroring the hover-then-click flow as closely as a touch surface allows rather than skipping the preview step entirely on mobile.

5. Manage and export the history

The pick history holds the 24 most recent colours, newest first, each one a clickable swatch that re-copies its own hex value on click - useful for going back to an earlier pick without re-finding it on the image. "Clear history" empties the list. "Export history" (enabled once at least one colour has been picked) downloads the full list as a small JSON file, one entry per pick, for anyone building a palette from several picks across one or more images.

Reading the three formats together

All three values in the readout describe the exact same pixel, just written in three formats a stylesheet, a design tool, or another piece of software might expect. A common interface blue, for instance, reads as #3B82F6 in hex, rgb(59, 130, 246) in RGB, and hsl(217, 91%, 60%) in HSL - three different notations for the identical colour, so whichever format a destination actually needs is already sitting right there rather than something to convert by hand afterward. All three values stay left-to-right even on an Arabic page, since a code-like token such as a hex or RGB string isn't something a reader parses the way they parse prose - reversing its character order would make it wrong, not more native.

The image is decoded and read entirely in your browser - it's never uploaded anywhere, at any point in this process.