Color Picker from Image – Get HEX, RGB & HSL from a Photo
Find the exact colour of any pixel in a photo, logo or screenshot. Click to pick HEX, RGB and HSL values, zoom in with the lens and get the image’s main colour palette.
Drop an image, move the pointer over it to preview colours in the zoom lens, and click to pick. Each picked colour shows HEX, RGB and HSL — click a value to copy it. The main colours of the whole image are listed as a palette with their share in percent.
How to use Color Picker from Image
- Drop an image or click to choose one.
- Move over the image; the lens shows the pixels under your pointer.
- Click to pick a colour.
- Click the HEX, RGB or HSL value to copy it.
- Use the palette of main colours for a quick colour scheme.
How it works
The image is drawn on a canvas in your browser, and the tool reads the colour of the pixel you point at. The zoom lens magnifies an 11 × 11 pixel area ten times, so you can hit thin lines and small text precisely. Nothing is uploaded — this matters for unreleased designs and client work.
HEX, RGB and HSL
| Format | Example | Used in |
|---|---|---|
| HEX | #8B5CF6 | CSS, design tools, brand guides |
| RGB | rgb(139, 92, 246) | CSS, image editors, code |
| HSL | hsl(258, 90%, 66%) | CSS, building tints and shades |
All three describe the same colour. HSL is handy when you want a lighter or darker version: keep the hue and change the lightness. Convert between formats any time with the HEX to RGB Converter tool.
Extracting a palette
Besides single pixels, the tool groups similar colours across the whole picture and shows up to eight main colours with their share of the image. This is a fast way to match a website, social post or presentation to a photo or a logo. Click a swatch to copy it, then build a full scheme with the Color Palette Generator.
Getting accurate colours
- Use the original file instead of a screenshot of it — screenshots can change colours slightly.
- JPG compression creates noise around edges; pick from the middle of a flat area.
- Photos have many slightly different pixels in the same “colour”; the palette average is often more useful than a single pixel.
- Screens show colours differently, but the HEX value stays the same on every device.
Typical uses
Designers pick brand colours from a client’s logo, developers match a mockup, and marketers keep social posts consistent. For logos you can also make a favicon in the same colours with the Favicon Generator.
Picking on touch screens
On phones and tablets, tap and hold on the image to see the lens, then lift your finger to pick the colour. Zoom the page with two fingers first if the area is very small. Every picked colour stays in the list until you reload the page, so you can collect several colours and copy them one by one.
You may also find these free tools useful: WebP to JPG Converter, Image Resizer and Image Compressor.
Frequently asked questions
How do I get the colour code from an image?
Drop the image into the tool and click the spot you want. The HEX, RGB and HSL codes appear and can be copied.
Is my image uploaded?
No. The picker reads pixels in your browser; the image never leaves your device.
Can I get the main colours of a photo?
Yes. The palette section lists up to eight main colours with their percentage of the image.
Why is the colour slightly different from what I expected?
Photos and JPG compression mix nearby pixels. Pick from the centre of a flat area or use the palette average.
Does it work on phones?
Yes. Tap the image to pick a colour; the lens shows the pixels under your finger.
Last updated: