Image Color Picker

This image colour picker reads the exact colour of any pixel in a picture and gives it to you as a HEX code, RGB, HSL and an approximate CMYK value, each with a copy button. It is for designers matching a brand colour from a logo or screenshot, developers who need the CSS value of a colour in a mockup, and anyone who wants to know "what colour is that?" without opening Photoshop.

Open or paste a PNG, JPG, WebP, GIF, BMP or AVIF image. Move the mouse over it and a round loupe magnifies the 11 × 11 pixels around the pointer, with the pixel being read outlined, while the colour under the pointer updates live. Click to pin it. On a phone, touch the image, slide your finger until the loupe (shown above your finger) is on the right pixel, and lift. With a keyboard, focus the image and use the arrow keys (hold Shift to move 10 pixels) and Enter. Every pick is added to a history row so you can collect several colours and copy them all at once.

By default the picker reads one pixel exactly. Photos are noisy — JPG compression and camera grain make neighbouring pixels differ — so you can switch to a 3 × 3 or 5 × 5 average, which gives the colour your eye sees rather than one stray pixel. A white pixel in a field of #1E40AF reads #FFFFFF at 1 × 1 and #3755B8 at 3 × 3. Averages are weighted by transparency, so see-through pixels do not drag the result towards black.

Extract palette finds the image's dominant colours: a copy of the image at most 256 pixels on its longest side is reduced to 4–12 colours by median-cut quantisation, near-identical colours are merged, and each colour is listed with the share of pixels closest to it. An image that is three-quarters red and one-quarter blue gives #FF0000 at 75% and #0000FF at 25%.

The conversions are exact and rounded once: RGB to HEX is direct, HSL follows the CSS Color 4 formula and is shown in whole degrees and percent, and CMYK uses the simple formula K = 1 − the brightest channel. That CMYK is an approximation: real print colours depend on the press and its ICC profile, which an on-screen image does not carry.

Colours are read in sRGB exactly as your browser decoded the image. If the file has an embedded colour profile or is a wide-gamut (Display P3) photo, the browser converts it to sRGB first, so a value can differ by a few units from what a profile-aware editor reports. Where your browser supports the EyeDropper API, a "Pick from screen" button also lets you sample a colour from anywhere on your screen; it is hidden elsewhere.

The image never leaves your device: it is decoded and read on a canvas in your browser, which you can confirm in the developer tools' Network tab. The site loads Google Analytics, but your image is never part of any request.

1. The file's first bytes are checked to confirm it is a PNG, JPG, WebP, GIF, BMP or AVIF image; files over 50 MB are refused before being read. 2. The browser decodes the image upright onto a canvas and reads all its pixels once with getImageData in sRGB (8 bits per channel). Images above 16,777,216 pixels, or longer than 16,384 pixels on a side, are read at the largest size within those limits, and the page says so. 3. The pointer position is mapped to a pixel by proportion: pixel = floor(offset ÷ displayed size × image size), clamped to the image. 4. Sampling: 1 × 1 reads that pixel; 3 × 3 and 5 × 5 average the square around it (clipped at the image edges), weighting each pixel's colour by its alpha. 5. HEX = the three channels as two hex digits each. HSL per CSS Color 4: L = (max + min) / 2, S = (max − min) / (1 − |2L − 1|), hue from the dominant channel, rounded to whole degrees and percent. CMYK: K = 1 − max(R, G, B)/255, C = (1 − R/255 − K) / (1 − K), and likewise M and Y, in whole percent. 6. Palette: a copy at most 256 px on its longest side is quantised by median cut to the chosen number of colours; colours closer than 24 units (straight-line distance in 0–255 RGB) are merged into the more common one, and shares are the fraction of non-transparent pixels nearest each colour.