Image color picker. Eyedrop any pixel's exact color.

How to use the Image Color Picker

This picker reads the exact color of any pixel in an image you open and gives it to you as HEX, RGB and HSL. It can also pull up to eight dominant colors from the whole image, and a separate converter turns any color value into the other formats with a strip of tints and shades. It suits designers, developers and anyone matching a brand color from a screenshot.

Step by step

1. 1
   Open an image

   Drop a JPG, PNG, WebP or GIF on the box that says Drop an image here, or click it to browse. With a keyboard, focus the box and press Enter or Space. The image appears on a canvas with the color panel beside it.

2. 2
   Hover, then click to lock

   Move the pointer over the image to preview the color under it. Click to lock that color so it stays in the panel while you move away. Double click the image to release the lock and go back to the hover preview.

3. 3
   Copy the value

   Press Copy HEX or Copy RGB, or click any value row in the panel, including the HSL row, to copy that exact text. A short message at the bottom of the screen confirms what was copied.

4. 4
   Extract a palette

   Press Extract palette to get up to eight dominant colors from the whole image. Click a swatch to copy its HEX code, or press Copy all to copy every code, one per line. Remove image clears the canvas so you can start again.

5. 5
   Convert any color

   In the Color converter, use Pick to open your system color picker, or type into HEX, RGB or HSL. The other fields update as you type. A field with an orange border cannot be read yet, so check the format, for example #3F6B54, rgb(63, 107, 84) or hsl(149, 26%, 33%).

6. 6
   Use the tints and shades

   Under Tints & shades, eight bands keep the converter color's hue and saturation at lightness 92, 80, 66 and 52 percent, then your color's own lightness, then 34, 22 and 12 percent. Click any band to copy its HEX code.

Reading the result

• HEX is the six digit web code, such as #3F6B54. RGB lists the red, green and blue channels from 0 to 255. HSL gives the hue in degrees and saturation and lightness in percent, which is the easiest form for making lighter or darker versions.
• The converter starts on #3F6B54, which reads as rgb(63, 107, 84) and hsl(149, 26%, 33%). HSL is rounded to whole numbers, so typing an HSL value back in can shift a channel by a point or two: hsl(149, 26%, 33%) comes back as rgb(62, 106, 83).
• Palette swatches are ordered by how much of the image they cover, most common first. Near duplicates and transparent areas are left out, so a mostly single color image can give fewer than eight swatches.

Tips and common mistakes

• For an exact brand color, use a PNG screenshot and click the middle of a flat area, not an edge. JPG compression and smooth edges blend neighboring pixels together.
• Images larger than 1400 pixels on the long side are scaled down to 1400 before you pick, so a tiny detail such as a one pixel line can come out slightly blended.
• The image picker and the converter are separate. To see tints and shades of a color you picked, copy its HEX and paste it into the HEX field of the Color converter.
• The converter accepts three digit HEX such as #fff, and it reads the first three numbers it finds in the RGB and HSL fields, so 63 107 84 works as well as the full rgb() form.

Privacy and limits

The image is decoded by your browser onto a local canvas. Nothing is uploaded and nothing is saved, so closing the tab clears it. Copying only uses your clipboard.

Back to the tool

Everything a picker should do.

• Eyedrop any pixel from a JPG, PNG, WebP or GIF just by hovering over the image.
• Lock a color with a single click, then double-click the image to resume hovering.
• Copy HEX, RGB or HSL with one click from the color panel, or click any value row to copy inline.
• Extract a dominant-color palette of up to eight colors from the whole image, then copy them all.
• Convert any color by typing or pasting a HEX, RGB or HSL value, the fields stay in sync.
• Browse tints and shades of the selected color and click any band to copy its HEX.

Frequently asked questions.

More design tools.

Browse the full free-tool library →