🎨 Image Colour Picker & Palette Extractor

Drop in a photo, logo or screenshot and hover to read any pixel as HEX, RGB and HSL — with a magnifier for precision. The tool also pulls out the image's dominant palette, ready to copy as CSS variables or JSON.

Click, drop or paste (Ctrl+V) an image. Then hover to read colours and click to keep one.
#000000
rgb(0, 0, 0)
hsl(0, 0%, 0%)
Hover over the image · click to keep · arrow keys nudge
Dominant palette
Picked colours
Click the image to collect colours here.
How the palette is extracted, why it differs from other tools, and privacy

Picking. The pixel under the pointer is read straight from the canvas, so a JPEG's compression noise is included — hover a flat area and you will still see slightly different values from pixel to pixel. The magnifier shows the 11 × 11 pixels around the pointer with the centre pixel outlined, and the arrow keys move the pick one pixel at a time once you have clicked.

Palette. The image is sampled down to at most 40,000 pixels and run through median cut: all pixels start in one box; the box with the widest colour range is split at its median along that channel, repeatedly, until there are as many boxes as colours requested. Each swatch is the average of its box, ordered by how many pixels it represents (the percentage shown). Near-transparent pixels are ignored. Different tools use different algorithms (k-means, octree) and different sample sizes, so expect similar — not identical — palettes elsewhere.

Copying. CSS output uses --color-1 … names for the palette and --picked-1 … for your clicks. Each swatch shows whether black or white text reads better on it (WCAG relative luminance).

Privacy. The image is decoded in this page only; it is never uploaded and nothing about it is stored. Pasting a screenshot from the clipboard works in Chrome, Edge and Firefox.