How to use the Image Color Picker
- 1. Open an imageA photo, screenshot or logo, or use the sample stripes.
- 2. Pick a colourClick the image, or type X and Y, or move with the arrow keys.
- 3. Extract a paletteGet the main colours with the share of the image each covers.
How picking works
The page loads with six coloured stripes and a white circle so you can try it at once. Clicking the second stripe returns #FF5421, with rgb(255, 84, 33), its HSL and OKLCH forms and its contrast on white. Coordinates are in image pixels, so after a pick the X and Y boxes show exactly where you clicked; keyboard users can focus the image and move with the arrow keys, holding Shift to jump 10 px, then press Enter.
Extract palette groups similar pixels with k-means clustering and shows each colour with its share of the image, largest first, plus CSS variables you can download as a palette.css file.
Getting accurate colours
- Use the original image, not a compressed screenshot: JPEG compression shifts colours near edges.
- Pick from the middle of a flat area, not an edge where colours blend.
- Photos rarely have one exact colour for an object; the palette gives a better overall idea.
- Large images are scaled to 1200 px wide for speed, which slightly averages fine detail.
The palette shows the main colours by area, so small accent colours can be missed; raise the palette size to catch them. Everything runs in your browser and the image is never sent anywhere. Convert picked colours with the colour code converter and build a scale with the colour shades generator.
Frequently asked questions
Can I pick colours from a website?
Take a screenshot and open it here. For live pages, browser developer tools also have a colour picker.
Why is the colour slightly different from the design file?
Colour profiles, compression and screen settings can shift values. Ask for the original hex codes when exact brand colours matter.
Is the Image Color Picker free?
Yes, the Image Color Picker is free. The first time you pick your first colour, you are asked for your name and WhatsApp number once. After that, this and every other Uncodemy tool opens straight away without the form.