toolaki

Image Colour Picker

Upload an image and click anywhere on it to read that pixel's colour. Get the HEX, RGB, HSL and HSB values, and copy any of them in one click.

Drag & drop an image here

or click to choose — you can also paste an image

Select an image

Your image never leaves your device.

Pick a colour from an image

Spotted a colour you love in a photo, logo or screenshot and want the exact code? Drop the image in, click the pixel, and you get its HEX, RGB, HSL and HSB values ready to copy into your design tool or CSS. You can also grab a colour from anywhere on your screen in supported browsers. The image is read on your own device with the Canvas API, so it never leaves your computer.

How to pick a colour from an image

  1. Add your image. Drag and drop it onto the box above, or click Select an image.
  2. Hover to aim. Move over the image and the magnifier shows the pixels up close, so you can land on exactly the right one.
  3. Click to pick. The colour and all its values appear below.
  4. Copy what you need. Copy the HEX, RGB, HSL or HSB value with one click. Your recent picks are kept so you can grab them again.

What the colour values mean

HEX is the six-character code used in CSS and most design tools, like #3A7BD5. RGB lists the red, green and blue amounts from 0 to 255. HSL describes a colour by hue, saturation and lightness, which is handy for making something lighter or more muted. HSB (also called HSV) uses hue, saturation and brightness, and is what design apps like Figma and Photoshop show.

Frequently asked questions

Is my image uploaded to a server?

No. The image is read entirely in your browser on your own device using the Canvas API. It never leaves your computer, which keeps it completely private.

Can I pick a colour from outside the image?

Yes, in Chrome and Edge. The "Pick from screen" button uses your browser's built-in eyedropper to grab a colour from anywhere on your screen. It isn't available in every browser yet, so the button only appears where it works.

Which image formats work?

Any image your browser can open, including JPG, PNG, WebP and GIF.

What's the difference between HSL and HSB?

Both start with hue and saturation. HSL's third value is lightness, where 100% is white. HSB's third value is brightness, where 100% is the most vivid version of the colour. Design tools usually show HSB.

Is it really free?

Yes — it's free with no signup, no watermark, and no limits.

Copied