Image Colour Picker and Palette
Pick any colour from a picture and get its hex, RGB and HSL codes, and the picture’s main colours as a palette to copy.
Drop pictures here, or choose them. JPEG, PNG, WebP, GIF and BMP; HEIC and AVIF where your browser opens them.
Colours
Click the picture to pick a colour, or Tab to it and move the cross with the arrow keys.
Made in this browser. Your pictures are not uploaded, and nothing is kept after you close the tab.
Runs in your browser — nothing you enter leaves this device.
About this tool
What it does
Image Colour Picker finds the colours in a picture. Click anywhere on it to pick the colour under the pointer, and get its codes in the three forms designers and developers use: hex (#ff6600), rgb(255, 102, 0) and hsl(24, 100%, 50%) — each copied with one press. It also lists the picture's main colours as a palette of 5, 8, 12 or 16, most common first, with how much of the picture each covers: a quick way to match a brand's colours from its logo, build a website palette from a photo, or find the exact shade of a product. The palette groups similar colours together and gives each group's average, so it shows colours the picture really has, not a mixture of two.
How to use it
- Choose a picture, or drop it on the page.
- Click the picture to pick a colour. With the keyboard, Tab to the picture and move the cross with the arrow keys; Shift moves faster.
- Press a code — hex, rgb or hsl — to copy it.
- Choose how many main colours to list; press Copy all as hex for the whole palette.
Limits and your data
- Colours are read from the picture as your browser shows it, in standard sRGB; a photo with a wide-gamut colour profile gives its sRGB equivalents.
- Picking reads one pixel of the picture scaled to at most 400 pixels across, which averages very fine detail; zoom into a small area with Crop Image first for a single tiny dot.
- A JPEG's compression shifts colours slightly at edges and in flat areas; pick from the middle of a colour, or use a PNG, for the exact value.
- Transparent parts are left out of the palette.
- Your picture is read in this browser tab and never uploaded to ToolsDev or anyone else; nothing is kept after you close the tab.
Questions
Which code should I use on a website?
Any of them works in CSS. Hex is the most common; rgb and hsl are easier to adjust by hand — hsl's last number is lightness, so the same colour lighter or darker is one change.
Why does the palette not include a colour I can see?
It lists the colours that cover most of the picture. A small spot of a strong colour may be grouped with its neighbours; choose more main colours, or pick it directly.
Can I get the colours of a website?
Take a screenshot of it and open the screenshot here.