Image Color Picker

Image color picker: get HEX, RGB, HSL and CMYK from any pixel

To pick a colour from an image, click Upload Image (or drop a picture on the upload box), then click any pixel. The Current Color panel shows its HEX, RGB, HSL and CMYK codes, each with a copy button. The picker reads the exact pixel from the full-resolution image, even when the picture is shown smaller on screen (images over about 40 megapixels are sampled from a reduced copy), and an 11 x 11 pixel magnifier shows what is under the pointer.

This free image color picker does more than one click at a time. Extract Dominant Colours groups the picture into up to eight main colours with their share of the image, Colour Harmonies lists matching colours for whichever colour is current, and the last 20 picks export as a JSON palette. The image is read in your browser, nothing is uploaded, and you can verify that in the Network tab of DevTools.

Need to type a colour instead of sampling it? Use the colour picker with WCAG contrast checks, or convert codes with the colour code converter.

Table of Use: what you do and what you get

Once you have a colour, use it as the frame colour in the image border adder, or turn two sampled colours into CSS with the gradient generator.

Features

• Exact pixel picking. One click reads one pixel, not an average. Small images are enlarged on screen up to 4 times with crisp pixels, and large ones are fitted to the page, but the value comes from the full-resolution original (images over about 40 megapixels are sampled from a reduced copy, and the tool tells you).
• Magnifier and position. An 11 x 11 pixel Magnifier beside the image shows the pixels around the pointer, plus the HEX code and the x, y position.
• Keyboard picking. Focus the image, move with the arrow keys (Shift moves 10 pixels) and press Enter or Space.
• Four formats with copy buttons. HEX, RGB, HSL and CMYK, copied as #ff5733, rgb(255, 87, 51), hsl(11, 100%, 60%) or cmyk(0%, 66%, 80%, 0%). Transparent pixels switch to HEX with alpha, RGBA and HSLA.
• Dominant colours. K-means clustering with a fixed seed, so the same image always gives the same colours.
• Colour Harmonies. Complementary, analogous, triadic and split complementary, one click to make any of them current.
• Color History. The 20 most recent picks, with Export Palette (JSON) and Clear.
• One image at a time. JPG, PNG, GIF, WebP, BMP, AVIF and SVG are accepted, along with anything else your browser can open.

How the formats are calculated

How to pick colors from an image, step by step

1. Click Upload Image, or drop a picture on the box. If you want a tighter picture first, use the image cropper.
2. Move the pointer over the image and watch the Magnifier. The HEX code and the x, y position update as you move.
3. Click to pick. The colour appears under Current Color in HEX, RGB, HSL and CMYK.
4. Click the copy icon beside a format. A green note confirms what was copied.
5. Click Extract Dominant Colours for the main colours of the whole image, or look under Colour Harmonies for matching colours.
6. Choose Export Palette (JSON) to save the Color History, Clear to empty it, or New Image to load another picture.

Who can use it

• Web developers who need a HEX or RGB value from a mock-up or screenshot.
• Designers and brand teams collecting colours from packaging, posters or a collage mood board.
• Illustrators and photographers who want the palette of a reference image, perhaps after checking the tones with the grayscale converter.
• Students and teachers exploring colour theory with real pictures.
• Online sellers choosing a backdrop colour that suits a product, perhaps after cutting the background out with the remove background tool.

FAQs