Free Online Image Color Picker
Whether you're trying to match a brand color from a logo, pull a palette from a photo, or find the exact shade used in a design mockup, LovePDFImg's Image Color Picker makes it instant. Upload any image, click on the pixel whose color you need, and get the value in HEX, RGB, and HSL formats - ready to paste directly into your CSS, design tool, or code editor.
The tool reads pixel data using the Canvas API's getImageData method, so the color values are taken directly from your image's actual pixels rather than an approximation. For images with transparency, the alpha channel value is also shown. Everything runs locally in your browser - your image is never uploaded to a server.
Getting an accurate color reading
The picture you see on this page is a preview, drawn at no more than 600 pixels wide. If your image is wider than that, it is scaled down before you click, and the color comes from the scaled copy rather than from the original file. On flat colors such as a logo, a button or a solid background this makes no visible difference. On a photo, grain, skin texture or fine patterns can shift a value by a few points, so it is worth clicking two or three spots in the same area and comparing.
Two habits help more than anything else. First, click in the middle of a color area, not on its edge, because edges blend two colors together. Second, start from a PNG if you can. A logo saved as JPG carries compression noise around its shapes, so the "same" blue can read slightly differently from one pixel to the next.
HEX, RGB or HSL: which one to copy
- HEX is the six-digit code, such as
#2F6FED. It is what CSS, Figma, Canva and most design tools expect, and it is always shown in capital letters.
- RGB gives the red, green and blue amounts from 0 to 255. If the pixel you clicked is partly transparent, the tool shows it as
rgba(...) with the alpha value included.
- HSL gives hue, saturation and lightness. It is the easiest format to adjust by hand: keep the hue and nudge the lightness to get a lighter or darker version of the same color.
The HEX value is always the plain six-digit color and does not carry transparency. For a semi-transparent pixel, copy the RGB value instead, since that is the one that includes the alpha.
When people use a color picker
- Matching a slide, poster or document to the exact color of a client's logo.
- Reading a color out of a screenshot of a website when you do not have access to its stylesheet.
- Checking whether two greys that look alike really are the same color.
- Finding a text color to place on top of a photo, then testing it for contrast.
The tool reads one pixel per click. It does not build a palette automatically, so to collect several colors from one image, click each spot in turn and copy each value as you go.