How to use Image Color Picker
- Choose a JPG, PNG or WebP image.
- Choose a palette size and extract the colours on your device.
- Click or tap the preview to sample an exact pixel and copy its colour code.
Useful to know
The picker reports browser-decoded pixel values. Embedded colour profiles, transparency and display calibration can make the same file look different in other software.
Pick an exact colour from an image
Use the image colour picker when you need the colour of a logo, interface, product, illustration or photograph. After choosing a JPG, PNG or WebP file, extract the palette and then click or tap any point in the displayed image. The selected panel reports the decoded pixel’s HEX, RGB and HSL values, its alpha transparency and its X and Y coordinates in the original image.
Coordinates start at zero in the top-left corner. The preview can be scaled down to fit a phone or laptop screen, but the tool maps the pointer back to the full source dimensions before reading the pixel. That means a click on a reduced preview still samples one pixel from the original decoded canvas rather than a colour averaged from the screen-sized preview.
HEX, RGB and HSL colour codes
HEX expresses red, green and blue as six hexadecimal digits, such as #155EEF. It is convenient in CSS, design systems and many visual editors. RGB gives the same three channels as numbers from 0 to 255 and is useful in CSS and image software. HSL describes hue in degrees plus saturation and lightness percentages, which can be easier when creating related lighter, darker or less saturated colours. The copy buttons use the displayed values so you do not need to retype them.
Extract a dominant colour palette
The palette groups nearby decoded RGB values into small colour buckets, counts a representative sample of visible pixels and ranks the most frequent groups. It then removes very similar neighbours so the result is more varied. Choose four colours for a compact mood board or up to ten when the source contains more distinct areas. Fully transparent pixels are excluded. The palette is a practical summary, not a claim about artistic importance or a formal colour-management profile.
Why a sampled pixel may differ from what you expect
Antialiasing, shadows, compression and gradients can make adjacent pixels different even when an area looks like one flat colour. Move the pointer slightly and compare nearby values. Browsers also decode embedded colour profiles for display, and monitor calibration, HDR handling or other software can change appearance. The reported number is the pixel value available from the browser’s decoded canvas; it is not a spectrophotometer measurement or a guarantee of print matching.
Transparency and image formats
PNG and WebP can contain partially transparent pixels. The tool shows alpha separately as a percentage while HEX, RGB and HSL describe the pixel’s colour channels without compositing them onto a background. JPG has no transparency. If an image needs a smaller canvas before sampling, use the image cropper; if exact output dimensions matter for a design, use the image resizer.
Private browser processing
The image is decoded and analysed on your device. Image Cosmos does not upload it to its server, and this tool does not create a cloud copy or downloadable derivative. The safety limit is 25 MB and 40 megapixels to reduce the chance of exhausting device memory. Close or reload the page to release the temporary image data. Review sampled colours in the software and output medium where they will actually be used.