Color Picker From Image — Get HEX, RGB & HSL From Any Photo
Hover over an image to read the exact colour under the cursor, click to keep it, and pull out the dominant palette automatically.
🔒 Runs in your browser — files never uploaded ⚡ No signup 💯 Free
Your picks click a value to copy
Dominant colours
Simplified layout on small screens — the full version is on desktop.
Pick colours from any image: move over the picture to see the HEX, RGB and HSL values of the pixel under the cursor (with a magnifier for precision), click to save the ones you want, and let the tool extract the image's dominant colours as a ready-made palette. Copy a single value, the whole set as a HEX list, or as CSS custom properties.
The image stays in your browser.
How to use Color Picker From Image
- Drop an image — a photo, logo, screenshot or design.
- Hover to read the colour under the cursor; the loupe shows the surrounding pixels so you hit the one you mean. Click to add it to your picks.
- Dominant colours are extracted automatically — choose 5, 8 or 12. Click one to copy it.
- Copy as CSS variables to drop the palette straight into a stylesheet.
Reading a colour precisely
A photograph rarely contains a flat colour: what looks like "the red of the jacket" is hundreds of neighbouring shades. The loupe magnifies an 11×11 block so you can choose a representative pixel deliberately rather than whatever the cursor happened to land on. For flat graphics — logos, UI screenshots — any pixel inside a shape gives the exact value, which is the fastest way to recover a brand colour when nobody has the style guide.
How the palette is extracted
The image is shrunk, every pixel is sorted into one of 32,768 colour buckets, and the fullest buckets are taken in order, merging any that are within a small distance of a colour already chosen (so a photo of the sea does not return eight near-identical blues). The percentage shows how much of the image each colour covers. It is a fast, deterministic method rather than a perceptual one; for a photo with a small but important accent colour, pick it by hand.
HEX, RGB and HSL
All three describe the same colour. HEX (#4f46e5) is what CSS and design tools expect. RGB shows the red, green and blue components 0–255. HSL — hue, saturation, lightness — is the one to edit by hand: change lightness to make a darker shade of the same colour, change hue to find its neighbour on the colour wheel. Convert between more formats with the colour converter, or build tints and shades from a pick with the palette generator.
Colour profiles
Browsers convert images to sRGB when they draw them, so the values you read are sRGB — which is what the web uses. A photo saved in Display P3 or Adobe RGB will read slightly differently from the same photo in a colour-managed editor. For web work that is the correct answer; for print, take the values from the original file in your editor.
Frequently asked questions
How accurate is the picked colour?
Exact for the pixel you click — the value comes straight from the image data. The magnifier exists so you can choose the pixel deliberately; in a photo, neighbouring pixels differ, so pick from the middle of an area rather than an edge.
How is the dominant palette chosen?
The image is downsampled, pixels are counted into colour buckets, and the fullest buckets are taken in order, merging near-identical shades. The percentage is how much of the image each colour covers. Small accent colours may not make the list — pick those by hand.
Why do the values differ from Photoshop?
Browsers convert images to sRGB before drawing them. A file in Display P3 or Adobe RGB reads slightly differently in a colour-managed editor. For web use, the sRGB values here are the right ones.
Can I get the colour from a screenshot of a website?
Yes — that is one of the best uses. Screenshots are flat colour, so any pixel inside an element returns the exact value the site uses. Watch out for anti-aliased edges and semi-transparent overlays, which blend colours.
Is the image uploaded?
No. It is drawn onto a canvas in your browser and read from there. Nothing leaves your device.