How to use an image color picker
Load an image, click the pixels you need, and read each value in the selected format. Image Color Picker keeps the points on the image while you inspect their names, compare Similar colors, and copy panel data as CSS or JSON.
- Drop an image into Drop an image here or select browse files. The page lists
PNG . JPG . GIF . BMP . WEBPas the available image types. - Choose HEX, RGB, HSL, HSB, or CMYK with Color format.
- Click a pixel in the image to add a point. Move over the image to see the loupe, then drag a numbered point to adjust it.
- Read the result in Picked Points. Use CSS, JSON, or Clear in that panel.
- Review Dominant Colors and Random Palette, or select New image to load another file.
How to pick and copy colors from an image
Choose Color format before placing points if you want the list and loupe readout in a particular notation. Selecting a point opens its detail panel with Color Name, the selected value, and Similar colors. Each point keeps its image position, so the JSON includes an index, coordinates, and color values.
Color format: HEX
picked value: #000000
RGB: rgb(0, 0, 0)
HSL: hsl(0, 0%, 0%)
HSB: hsb(0, 0%, 0%)
CMYK: cmyk(0%, 0%, 0%, 100%)Use CSS in Picked Points to copy custom properties for the points. JSON includes HEX, RGB, HSL, HSB, and CMYK for each point. You can also click a color swatch or value in a result panel to copy that value.
What Loupe zoom (100-3000%) changes
Loupe zoom (100-3000%) changes the square loupe's magnification around the pointer. The field starts at 400. The script clamps the value to 100 through 3000, and the loupe shows the pixel beneath its center while you position a point.
The page reads the selected image in the browser with a temporary object URL and a canvas. Its code contains no fetch, XMLHttpRequest, sendBeacon, or form submission that sends the image to a server.
What the result panels do
Picked Points lists each selected pixel and keeps its numbered marker on the image. Use CSS to copy custom properties, JSON to copy the point records, or Clear to remove the current list.
Dominant Colors draws the image onto a 64 by 64 canvas, skips pixels with alpha at or below 127, and groups the remaining pixels into up to six entries with percentages. Select Refresh to run the calculation again. The initial groups are random, so their centers can change after a refresh.
Random Palette selects a source pixel at random and builds five related colors. Select Regenerate for another palette, then use CSS to copy its custom properties. Random color adds one randomly selected image point to Picked Points.
When to use the image results
For a screenshot, click a button color, inspect its Color Name, and copy the HEX or CSS value into a stylesheet.
For a chart image, place points on labels or data marks, then copy JSON with their coordinates and five color formats.
For an image-based color board, refresh Dominant Colors for swatches, or regenerate Random Palette and copy its CSS variables into a prototype.
Image Color Picker or Color Finder?
Use Image Color Picker when the source color is a pixel in an uploaded image. The broader Image Color Tools category includes Color Finder, which is the better choice for entering a color value or name, converting between formats, building harmony palettes, or checking WCAG contrast.
Frequently asked questions
How do I use an image color picker to select a pixel?
Drop an image into Drop an image here or choose browse files, then click the image. Drag the numbered point while watching the loupe to adjust its position.
Which formats does Image Color Picker show?
Image Color Picker shows HEX, RGB, HSL, HSB, or CMYK through Color format. The JSON copied from Picked Points contains all five formats for each point.
Can I copy picked image colors as CSS?
Yes. Select CSS in Picked Points, Dominant Colors, or Random Palette to copy that panel's CSS custom properties. Picked Points also has a JSON button.
Does Image Color Picker upload my image?
No. The page reads the selected file in the browser, and its script contains no request that sends the image to a server.