Pick a color from an image
Open a picture and click any point to get its colour as a HEX, RGB and HSL code, ready to copy. The colours that cover most of the picture are listed for you as well.
- Runs in your browser
- Nothing is uploaded
- No sign-up
- No watermark
Drag & drop your image here
or tap to browse · you can also paste from the clipboard
JPG · PNG · WebP · GIF · BMP · AVIF · SVG · up to 50 MB each
Choose an imageBefore
Result
Processed image will appear here.
How to use the image colour picker
Add a picture and move the pointer over it to preview the colour underneath. Click or tap to pick it: the HEX code is added to a list with a copy button, and the HEX, RGB and HSL values of every pick, plus the picture's main colours, appear in a box you can copy.
- Add your imageIts main colours are listed straight away.
- Click the colour you wantMove over the picture to preview, click or tap to pick.
- Copy the codeEach pick has a copy button; the full list is below.
About this tool
When you need the exact colour of something you can see, a logo, a paint swatch in a photo, a button in a screenshot, guessing by eye gets close but never right. Clicking the picture reads the number directly. Each colour you pick is kept in a list with a copy button, so you can collect several from one image.
Photographs need a little care. What looks like one flat colour is, pixel by pixel, a spread of slightly different ones, from lighting, camera noise and compression. By default this page therefore reads the average of a small area around the point you click, which gives a steadier answer. For crisp artwork and screenshots, switch to a single point.
What you get
- HEX, RGB and HSL for every pick
- Live preview under the pointer
- Up to 12 picks kept in a list
- The picture's main colours, with their share
- Single point or averaged area
When to use the image colour picker
Matching a brand colour
Read the exact colour from a logo file or a screenshot of a website when no style guide is to hand.
Building a palette from a photograph
The main colours of a picture, with a few picks of your own, make a ready colour scheme for a design that uses it.
Web and app design
Lift the code of a button, a background or a link from a screenshot to reuse it in CSS.
Paint, fabric and print matching
A photo of a wall or a garment gives a starting code to compare against a manufacturer's chart, allowing for lighting.
The same colour in three notations
| Colour | HEX | RGB | HSL |
|---|---|---|---|
| Pure red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Orange | #ff8800 | rgb(255, 136, 0) | hsl(32, 100%, 50%) |
| Mid grey | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) |
| White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
How it works
The picture is drawn into a canvas, and a click reads the red, green and blue values stored there at that point. With an averaged area, the values of a square of pixels around the point, 5 or 11 pixels across, are added up and divided, each weighted by how opaque it is, so a transparent neighbour does not drag the result towards black. Pictures above about 1.6 megapixels are read from a reduced copy, in which each pixel already stands for several of the original.
HEX is the three channel values written as two base-16 digits each. HSL is calculated from them: lightness is the midpoint of the largest and smallest channel, saturation is their spread relative to that lightness, and hue is the angle on the colour wheel given by which channel is largest. The main colours come from a separate copy of at most 40,000 pixels, reduced to six colours by median cut, the method this site also uses to shrink PNG palettes, and counted to give each one's share.
Common problems and how to fix them
- The code does not match the colour I expected
- Photos of real objects are affected by lighting, white balance and the camera, so the colour in the picture is not the colour of the object. The code is correct for the picture. For a brand colour, read it from an original logo file, not a photograph.
- Two clicks on the same area give different codes
- That is normal variation between pixels. Choose "A wider area (average)" to smooth it out.
- A pick says "transparent"
- That point of the picture has no colour: it is a fully transparent part of a PNG or WebP.
- The colour looks different in another program
- Screens and programs differ in how they display a given code, and pictures with an embedded colour profile are converted to standard sRGB when read here. The code describes the sRGB colour.
Frequently asked questions
Why do I get a slightly different code each time I click the same colour?
Because in a photograph it is not one colour. Neighbouring pixels differ by a few steps even in an area that looks flat. Choose "A wider area (average)" for a steadier reading, or accept that any of the nearby values is a fair description.
Is the code exact?
For pictures up to about 1.6 megapixels, a single-point reading is the exact value of that pixel. Larger pictures are shown from a reduced copy to keep the page responsive, so each point is already an average of a few neighbouring pixels of the original. For flat artwork the difference is nil; for photographs it is within the variation described above.
What are HEX, RGB and HSL?
Three ways of writing the same colour. RGB gives the amounts of red, green and blue from 0 to 255. HEX is those three numbers written in base 16 after a #, the form used in web design. HSL describes the colour as hue (an angle on the colour wheel), saturation and lightness, which is easier to adjust by hand.
How are the main colours worked out?
A small copy of the picture is reduced to six representative colours, and the page counts how much of the picture each one covers. They are approximations of the dominant tones, good for building a palette, and not necessarily the exact value of any single pixel.
How many colours can I pick?
The twelve most recent are kept in the list, newest first, and all of them are written out in the box below the picture for copying together.
Does this page save or upload my picture?
No. The picture is read by your browser on your own device, and nothing is produced or sent anywhere; the result is only the colour codes on the page.