Color Picker from Image — get HEX & RGB online
Load a photo or screenshot and lift the exact HEX, RGB and HSL value of any pixel, with a zoomed preview. Free — the image is never uploaded anywhere.
About the Color picker from image tool
Matching a colour you can see but do not have a code for is a small, recurring problem. A client sends a logo as a JPG with no brand guideline. A screenshot of a competitor's site has exactly the blue you want. A photograph contains a shade that would suit the page it is going on. In every case the colour is right there on screen and completely inaccessible until you can read the pixel value.
Lifting it from the image is the direct answer. Load the picture, click the pixel, and get HEX, RGB and HSL ready to paste into CSS or a design tool. The zoomed preview matters more than it sounds — at normal size a single pixel is smaller than the cursor, and on a photograph adjacent pixels can differ substantially, so being able to see exactly which one you are about to take is the difference between the colour you meant and one near it.
Photographs need a little judgement, because a real-world surface is never one flat colour. Lighting, shadow, reflection and camera noise mean a wall that looks uniformly blue is made of hundreds of slightly different blues, and any single pixel is one sample rather than the answer. Sample a few points across the area and pick something representative, avoiding highlights and shadows at the edges.
Compressed images add a second complication worth knowing about. JPEG compression works in blocks and introduces small colour shifts, particularly along sharp edges where a logo meets its background. A pixel taken from that boundary can be a blend that exists nowhere in the original design. Sample from well inside a solid area, and if the value comes back suspiciously close to a round number, it very likely was one before compression.
How it works
Load an image
Drop in a screenshot, a photo or a logo. It is read from your device and never uploaded anywhere.
Click the pixel you want
A zoomed preview shows exactly which pixel is under the cursor, so you take the colour you actually meant.
Copy the value
HEX, RGB and HSL are all produced, ready to paste into a stylesheet or a design application.
Frequently asked questions
- Why do two pixels in the same area give different values?
- Because photographs are never flat. Lighting, shadow, surface texture, camera noise and JPEG compression all mean a visually uniform area is made of many slightly different values. Sample several points and choose one that represents the area rather than trusting the first click, particularly near edges and highlights.
- Can I get the exact brand colour from a logo?
- Close, and often exact if the file is a PNG or SVG with flat colour. A JPG is less reliable: its compression shifts values slightly, especially near edges where the logo meets its background. Sample well inside a solid region, and if the result is very near a round HEX value, that was almost certainly the original.
- Does it work on screenshots?
- Yes, and screenshots are the most reliable source since they are usually PNG and lossless, so pixels carry exactly the values the screen displayed. This is the most accurate way to identify a colour used on a website when you cannot inspect its CSS directly.
- Can I pick a colour from anywhere on my screen?
- Not from within a web page — browsers deliberately prevent a site from reading pixels outside its own content, which is an important security boundary. Take a screenshot of whatever you want to sample and load that image here. Operating systems also ship a native colour picker that can sample the whole screen directly.
- Which format should I use for accurate results?
- PNG, or any lossless format, because every pixel keeps the exact value it was given. JPG is lossy and shifts colours slightly, more noticeably around edges and in areas of fine detail. If you have the choice of source file, take the PNG or the SVG over a JPG export of the same artwork.
- What do I do with the colour once I have it?
- Paste it into your stylesheet or design tool. If you are building a palette around it, the Color converter will give you the HSL form, which is the notation to work in when generating lighter and darker variants — and it also reports contrast ratios, so you can check the colour is actually usable behind text.
- Is my image uploaded anywhere?
- No. The picture is drawn to a canvas in your browser tab and pixel values are read from there, so it never crosses the network. Unreleased designs, client artwork and internal screenshots stay on your own machine, which is not something you can assume of a tool that processes images on a server.