Image Color Picker

The Image Color Picker lets you upload an image, click anywhere on it, and read the colour of that single pixel as a hexadecimal value (such as #ff8000) and as an rgb() value. It keeps your last 12 picked colours. It is useful for grabbing a specific colour from a screenshot, a design mock-up or a photo to use in a web page or design app. It reads one pixel at a time: it does not analyse the whole image for a dominant colour, build a palette, or show other colour formats such as HSL.

How to use it

1. Click the dashed box 'Click to upload an image' and choose a picture. It is drawn on the canvas below for display; an image wider than 600 pixels is shown scaled down proportionally to 600 pixels wide, and smaller images are not enlarged. Colours are read from the original full-resolution pixels, not from the shrunken display.
2. After uploading, a circular crosshair appears in the middle of the canvas. Click anywhere on the image: the circle moves to your click and the colour at that spot is read.
3. You can also use the keyboard. Click the canvas once to focus it, move the crosshair with the arrow keys (exactly one original-image pixel per press, or ten with Shift held; when a large image is shown scaled down the crosshair moves less than one screen pixel per press, but it always lands on the adjacent original pixel), and press Enter or Space to pick the colour at the crosshair.
4. After picking, a colour swatch appears on the left with the hex value and the rgb(r, g, b) value on the right, each with a copy button.
5. 'Color history (click to view)' below keeps your last 12 different colours. Click a small swatch to bring it back into the result area. Picking the same colour again keeps only one copy and moves it to the front.

A worked example (actually computed)

The tool converts the red, green and blue values (each 0 to 255) into two hexadecimal digits each and joins them. For example rgb(255, 128, 0) is shown as #ff8000, rgb(18, 52, 86) as #123456, and all zeros as #000000. rgb(5, 5, 5) is shown as #050505, because values below 16 are padded to two digits. Letters are always lowercase. These conversions were run through the same logic the tool uses.

What it supports and where it stops

• When you pick, the tool scales your click position on the display canvas to original image coordinates and reads from a full-resolution off-screen copy, so the smoothing from display shrinking does not affect the value. A large image is shown reduced, though, so one click position maps to several original pixels and you get the one it maps to; for finer control use the arrow keys, which move in original-image pixels: each press lands on exactly the neighbouring original pixel. If the image is so large that the browser cannot create the off-screen canvas, the tool falls back to reading the shrunken display canvas (then the arrow keys move in display pixels).
• All four RGBA channels are read. For a fully opaque pixel only the hex and rgb() are shown; when opacity is below 100% an extra rgba(r, g, b, a) row with a percentage appears and the swatch is drawn with that transparency. The hex value holds RGB only, not alpha. A fully transparent pixel usually reads as 0,0,0.
• Only hex and rgb() are shown. There is no HSL, HSV or CMYK, and no magnifier.
• History holds at most 12 colours and exists only on the current page; it is cleared on reload.
• One image at a time. Only the first frame of the picture is used, so an animated image gives you the colours of its first frame.
• Your screen's colour profile or eye-comfort mode can change how a colour looks but does not change the numbers shown. Colour profiles embedded in the image are not processed.

FAQ: Why does the colour differ from my design file?

Common reasons: the image was compressed (JPEG in particular shifts colours slightly around edges and gradients), the image was scaled down so edge pixels blended, the spot you clicked was an anti-aliased transition pixel, or the design app used a different colour space. Pick from the middle of a large flat area and avoid edges.

FAQ: How do I hit one exact pixel?

Use the keyboard. Click the canvas, move the crosshair one pixel at a time with the arrow keys, and press Enter. That avoids small mouse errors. The crosshair moves in original-image pixels: one press is exactly one original pixel (ten with Shift), even when the image is shown scaled down, in which case the on-screen movement is small.

FAQ: Hex or rgb(), which should I use?

They describe the same colour and both work in CSS. Hex is shorter and common in design tools and stylesheets; rgb() has more readable numbers and is easier to calculate with in code.

FAQ: Can it extract the dominant colours of a whole image?

No. This tool only samples single points. For several colours, pick at different spots; the history keeps the latest 12.

Privacy and processing

The image is read by your browser and drawn on a local canvas. Colour picking happens entirely on your device, the code makes no network requests, and the image is not uploaded or stored. The image and colour history disappear when you close or reload the page.