# Image Color Picker

> An image colour picker reads the exact colour of any pixel you click and reports it as HEX, RGB and HSL. The image is drawn to a canvas in your browser and read back locally, so nothing is uploaded.

Source: https://rankcert.com/tools/image-color-picker
Free, no signup. Updated: 2026-08-29

## How to use it

1. Choose an image or drop it in.
2. Click any pixel to read its colour.
3. Copy it as HEX, RGB or HSL - recent picks are kept as a palette.

## Questions

### Is my image uploaded?

No. It is drawn to a canvas in your browser and read back with getImageData. There is no network request at any point.

### Why does the picked colour look different from the original?

Screenshots and photographs are often in a wider colour profile than sRGB. The canvas reads sRGB values, which can differ slightly from what a design tool reports.

### When should I use HSL over HEX?

HSL when you are building a palette. Changing only the lightness gives you consistent tints and shades of the same hue, which is very difficult to do by hand in HEX.

### Can I pick from a screenshot?

Yes - take the screenshot, drop it in, and click. That is the usual way to lift a colour from a site or app you cannot inspect.

### How do I find the hex code of a colour in a screenshot?

Drop the screenshot in and click the pixel. That is the reliable way to lift a brand colour from a site or app whose CSS you cannot inspect.

### What is the difference between HEX, RGB and HSL?

They describe the same colour three ways. HEX and RGB are the same numbers in different notation. HSL splits it into hue, saturation and lightness, which makes building tints and shades far easier.

### Why does the colour differ from the design file?

Colour profile. Photos and screenshots are often in Display P3 or Adobe RGB; the canvas reads sRGB. The values are correct for the web, which is sRGB.

### Can I pick an average colour rather than one pixel?

Zoom out and pick from a flat area. A single pixel in a gradient or a JPEG artefact is not representative of the region it sits in.

## Related tools

- [Image Resizer](https://rankcert.com/tools/image-resizer): Resize PNG, JPG, WebP and GIF images to exact pixel dimensions with aspect ratio locked. Runs entirely in your browser - no upload, no queue, no watermark.
- [Image Compressor](https://rankcert.com/tools/image-compressor): Compress JPG and PNG images with a live quality slider and see the exact size saving before you download. Everything runs in your browser.
- [SVG to PNG](https://rankcert.com/tools/svg-to-png): Convert an SVG to a PNG at 1x to 8x scale, so logos and icons export crisp at whatever pixel size you need. Runs in your browser.
- [Favicon Generator](https://rankcert.com/tools/favicon-generator): Turn any image into the five favicon sizes browsers and mobile devices actually request, and get the HTML link tags to paste into your head.
- [PNG to WebP](https://rankcert.com/tools/png-to-webp): Convert PNG and JPG images to WebP with a quality slider, and see exactly how many bytes you saved before downloading.
- [WebP to PNG](https://rankcert.com/tools/webp-to-png): Convert WebP images to PNG for tools and platforms that will not accept WebP. Transparency is preserved and nothing is uploaded.