Image Color Picker

Click any pixel to read its HEX, RGB and HSL value, or take the dominant colours straight off the image as a palette. Everything runs in your browser.

Drop PNG, JPG, WebP, GIF or BMP here, or click to select

Up to 20 files, 50 MB each

Three ways to write one colour

The same colour has several notations, and which one you want depends on what you are doing with it.

NotationLooks likeBest for
HEX#2563ebPasting into CSS, design tools, brand docs
RGBrgb(37, 99, 235)Code that manipulates channels, or adding alpha
HSLhsl(221, 83%, 53%)Adjusting a colour by hand — lighter, duller, shifted

HSL is the one worth learning. Building a hover state from #2563eb in hex means guessing at three numbers at once; in HSL you drop the lightness by ten and you are done.

Frequently Asked Questions

How do I pick a color from an image?

Drop the image in and click anywhere on it. The pixel you clicked is shown as HEX, RGB and HSL, and clicking any of those three copies it to your clipboard. The tool also pulls out the dominant colours automatically, so you often do not need to hunt for them by hand.

How do I get the hex code from an image?

Click the pixel you want and press the HEX value to copy it. Hex is the six-digit form CSS and design tools expect, like #2563eb, and it is the same colour as the RGB shown next to it — just written differently.

What is the difference between HEX, RGB and HSL?

They describe the same colour three ways. HEX and RGB both give red, green and blue amounts — HEX in hexadecimal, RGB in plain numbers from 0 to 255. HSL describes hue, saturation and lightness instead, which is far easier to adjust by hand: to make a colour lighter you change one number rather than guessing at three.

How are the dominant colours chosen?

Every pixel is sorted into a coarse colour bucket, the buckets are ranked by how many pixels fall into them, and near-duplicates are dropped so you get six distinct colours rather than six shades of the same one. Fully transparent pixels are ignored, so a logo on a transparent background returns the logo colours rather than nothing.

Can I pick colors from a screenshot?

Yes, and it is one of the most common uses — matching a brand colour you can see but do not have the value for. Paste or drop the screenshot in and click the colour you need.

Are my images uploaded anywhere?

No. The image is decoded onto a canvas in your own browser and the pixel values are read locally. Nothing is transmitted, which you can confirm by watching your Network tab while you pick.

Related tools