Question 1

How do I get a color code from an image?

Accepted Answer

Upload the image and move your pointer over it: a magnifier shows the pixels under the cursor. Click to pick a color and copy its HEX, RGB or HSL code. With the keyboard, focus the image, move with the arrow keys and press Enter to pick.

Question 2

What's the difference between HEX, RGB and HSL?

Accepted Answer

They're three ways of writing the same color. HEX (such as #2A78D6) is the usual format in web design, RGB gives the red, green and blue amounts from 0 to 255, and HSL gives the hue in degrees plus saturation and lightness percentages, which is the easiest to adjust by hand.

Question 3

How is the color palette created?

Accepted Answer

The tool groups the image's pixels into the number of colors you choose using k-means clustering, then shows the average color of each group, ordered by how much of the image it covers. The same image always produces the same palette.

Question 4

Can I pick a color from outside the image?

Accepted Answer

In Chrome and Edge on desktop, “Pick from screen” opens the browser's eyedropper so you can pick any pixel on your screen, including other windows. Other browsers don't support it yet, so the button only appears where it works.

Question 5

Why is the picked color slightly different from my design file?

Accepted Answer

JPG compression and color profiles can shift colors slightly, so pick from a PNG or the original design export for exact values. Very large images are sampled at up to 1600 pixels wide, which can blend the finest single-pixel details.

Image Color Picker

Frequently Asked Questions

Related Tools