Rebuilding a design in code
Sample a button colour from a design screenshot and paste the HEX straight into the CSS.
Guide
Image Colour Picker takes an exact colour out of a picture. As you move the mouse, a 120 px circular loupe follows the cursor and magnifies the 15×15 pixels around it with the centre cell highlighted, so a click on a gradient or an edge does not land in the wrong place. Clicking writes the value to “Current colour” and copies the HEX automatically, and the rgb() and hsl() forms are listed too. When the image loads it is also scaled to 128 px wide and clustered, producing eight dominant colours drawn as a band whose widths follow their share of the pixels. All processing is local to the browser.
Updated 2026-09-093 min read
Image Colour Picker takes an exact colour out of a picture. As you move the mouse, a 120 px circular loupe follows the cursor and magnifies the 15×15 pixels around it with the centre cell highlighted, so a click on a gradient or an edge does not land in the wrong place. Clicking writes the value to “Current colour” and copies the HEX automatically, and the rgb() and hsl() forms are listed too. When the image loads it is also scaled to 128 px wide and clustered, producing eight dominant colours drawn as a band whose widths follow their share of the pixels. All processing is local to the browser.
Unlike “Colour Converter”, the colours here come from image pixels; unlike “Image Histogram”, it is about particular values rather than the light-and-dark distribution.
HEX goes straight to the clipboard
The eight dominant colours come from a 128 px thumbnail
Tiny pixels get merged, so a pick is slightly averaged
Click on the sky in the imageHEX `#4A90D9`, `rgb(74, 144, 217)`, `hsl(211, 65%, 57%)`Load a brand posterThe widest section of the band is the poster's main colour, the rest follow by areaA large image with a 6,000 px long edgeThe sampling canvas shrinks to 2,048 pxSample a button colour from a design screenshot and paste the HEX straight into the CSS.
Load a competitor's poster and see how the eight dominant colours divide up, to read its colour balance.
Take the main and secondary colours from a company logo and apply them to a theme.
Zoom to a single pixel to confirm whether a patch is pure black #000000 or a dark grey.
JPEG compression, colour profiles and any scaling all shift pixel values by 1–3, so a PNG original and a flat-colour area give the most accurate reading.
No, only RGB is read; on a PNG with a transparent background you get the colour that the canvas composites there.
The palette is clustered by pixel count, so a small accent area gets merged away; click it directly with the loupe instead.
The image is drawn to a canvas inside your browser for sampling and is never uploaded to any server; the clipboard is touched only when you click.
Updated 2026-09-09
Magnifier-precise sampling (HEX/RGB/HSL) and automatic dominant-color palettes