Colour Picker from Image
Choose an image, click a pixel to read its colour codes, and see the six main colours of the whole picture.
Drag an image here or choose one
Click the picture to pick a colour. With the picture focused, use the arrow keys to move one pixel at a time (hold Shift for ten).
Recent picks (select one to copy its HEX)
Palette from this picture (select a colour to copy its HEX)
Worked examples
Picking an orange from a logo
A click on a pixel of the orange logo
HEX #ff4a1f, RGB 255, 74, 31, HSL 12, 100%, 56%.
The colour comes from the exact pixel clicked, even if the picture is shown smaller on screen.
Picking a blue from a photo
A click on a pixel of a blue sky
HEX #0066cc, RGB 0, 102, 204, HSL 210, 100%, 40%.
The three formats describe the same colour, so the HEX value can be pasted into a stylesheet and the RGB value into a design tool.
About Colour Picker from Image
Spotting a colour in a photo, logo or screenshot is easy. Getting its exact code is harder. Choose a picture, click any pixel and the tool shows its HEX, RGB and HSL values, each with a copy button. The colour is read from the pixel in your original image, even when a large picture is shown smaller on screen, so the value is exact. It is a handy way to match a colour from a photo, a logo or a screenshot with the colour codes designers and developers use.
The tool also looks at the whole picture and pulls out the six main colours, using a simple averaging method that groups similar shades together. Each swatch shows its HEX code and the share of the picture it covers, and selecting one copies the code. A strip of recent picks keeps your last eight colours handy, and the arrow keys let you step from pixel to pixel without a mouse. Every pick is added to a short history, so you can collect several colours from one picture before copying them.
How to use Colour Picker from Image
- Choose a picture or drag it onto the box.
- Click the colour you want, or use the arrow keys to move around.
- Copy the HEX, RGB or HSL value.
- Select a swatch in the palette to copy one of the main colours.
Common uses
- Matching a brand colour from a logo or screenshot
- Finding the main colours of a photo for a design
- Picking a colour for text or buttons from an inspiration image
- Checking the exact colour of a pixel in artwork
Frequently asked questions
How accurate is the colour I pick?
The value comes from the exact pixel in the original image, not from the smaller picture on screen, so it is precise. Photos contain subtle noise and compression, so neighbouring pixels differ slightly. Click a flat area for a clean colour.
How is the palette worked out?
The picture is sampled, then similar colours are grouped by repeatedly averaging them until the groups settle, which is a simple clustering method. The six largest groups are shown with their share of the picture. The starting points are chosen the same way each time, so the result is repeatable.
Why do I see fewer than six palette colours?
A picture with only a few distinct colours, such as a simple logo, cannot be split into six different groups. The tool only shows colours that actually appear, so a three colour graphic gives three swatches. Transparent areas are ignored.
What are HEX, RGB and HSL?
They are three ways of writing the same colour. HEX is a six character code used in web design, RGB gives the amounts of red, green and blue from 0 to 255, and HSL gives hue, saturation and lightness, which is easier to adjust by hand.
Can I use the keyboard instead of a mouse?
Yes. After you click the picture once, or tab to it, the arrow keys move the pointer one pixel at a time and Shift moves ten. Each move updates the colour values straight away, so you can fine-tune the pick precisely.