Color Picker from Image
Click any pixel to get its color code. Open an image, or use the eyedropper to pick from anywhere on your screen.
Choose an image, then click anywhere on it.
How to use it
Open a photo, screenshot or logo, then click the spot whose color you want. The HEX, RGB and HSL codes appear instantly and can be copied with one click. In Chrome, Edge and other Chromium browsers, Pick from screen lets you sample any pixel on your screen, even outside the browser.
FAQ
Is my image uploaded?
No. The image is drawn in your browser and never leaves your device.
Why is there no “Pick from screen” button?
The screen eyedropper needs a Chromium-based browser such as Chrome or Edge on a computer. You can still pick colors from any image you open.
Does the picked color match the original exactly?
Yes for the pixel you click. Photos contain noise and compression, so nearby pixels can differ slightly; zoom the image before opening it if you need an exact tone.
Picking a colour
- Press the file chooser and open a photo, screenshot, logo or any other image. It is drawn on the canvas below the button.
- Click the exact spot whose colour you want. The swatch changes and three codes fill in: HEX, RGB and HSL.
- Press Copy beside the format you need. The button reads "Copied" for a moment to confirm.
- If you see a "Pick from screen" button, you can use it to sample any pixel visible on your display, including other windows. Click it, move the magnifier to the spot and click again.
Before you pick anything, the swatch shows a default blue (#2563EB) just as a placeholder; it is not taken from your image.
What the three codes mean
The tool reads one pixel and gets its red, green and blue values, each from 0 to 255. These are shown directly as RGB, for example rgb(37, 99, 235). The HEX code is the same three numbers written in base 16 and joined together: 37, 99 and 235 become 25, 63 and EB, giving #2563EB.
HSL describes the same colour differently. Lightness is the average of the largest and smallest channel. Saturation measures how far apart those channels are relative to the lightness, and hue is an angle from 0 to 360 on the colour wheel, where about 0 is red, 120 green and 240 blue. The blue above comes out as hsl(221, 83%, 53%). All HSL numbers are rounded to whole numbers, so converting HSL back to RGB may give a value that is off by one.
Picking accurately
An uploaded image is scaled down so that its longer side is at most 2,000 pixels; smaller images are kept at their own size. Clicks are mapped from the displayed canvas to the underlying pixel, and the colour of that single pixel is read. A very large photo is therefore sampled from the reduced version, which is slightly averaged compared with the original file.
Photographs rarely contain a perfectly flat colour. A blue sky might vary by several steps from one pixel to the next because of sensor noise and JPG compression, so two clicks a few pixels apart can give different codes. For a representative colour, click a few places and compare. Flat graphics such as logos, interface screenshots and PNG icons give consistent values.
Common uses
- Matching a brand colour from a logo when you only have an image of it.
- Copying a colour from a screenshot of a website into a stylesheet as a HEX code.
- Building a palette from a photo you like by sampling its main tones.
- Finding an RGB value for a presentation or design program that asks for it.
Tips and limits
- Screenshots taken on screens with colour management can shift colours slightly. The code describes the pixels in the file, not how the original object looked in real life.
- Transparent pixels: the tool reads the red, green and blue values but ignores opacity, so a faint, see-through area may report the colour underneath its transparency.
- The screen picker appears only in browsers that provide the EyeDropper feature, which in practice means recent Chrome, Edge and similar Chromium browsers on a computer. Pressing Escape cancels it without changing anything.
- Only HEX, RGB and HSL are provided. If you need CMYK for print, treat these values as a starting point and check them in your design software.
More questions
Why do two clicks on the same-looking area give different codes?
The pixels differ slightly because of noise and compression. Both codes are correct for their own pixel.
Which format should I paste into CSS?
All three are valid in CSS. HEX is the shortest and the most common; HSL is easier when you want to adjust lightness by hand.
Does it work with pictures from my phone?
Yes, you can choose any image file. The screen picker is not available on most phones, but opening an image works.