Image Color Picker: Get Hex and RGB from a Photo

About the Image Color Picker

The Image Color Picker reads the exact color of any pixel in a picture. Choose, drop or paste one image, move the pointer over it, and the color under the pointer is shown as a hex code, an rgb() value and an hsl() value. Click the pixel and the color is pinned to a list, with its position in the image and a copy button. You can pin as many colors as you like and remove them one at a time or all at once with Clear.

It reads PNG, JPEG, GIF, BMP, WebP and AVIF files up to 50 MB. Your image never leaves your device. Nothing is uploaded, there is no account, and the pixels are read by your own browser.

How to use it

The arrow keys move the picker 1 pixel at a time, and Shift with an arrow moves it 10 pixels. The picker stops at the edge of the image. When it sits in a corner, magnifier cells that fall outside the image are shown empty.

How a hex code becomes rgb

A pixel is stored as three channel values from 0 to 255: red, green and blue. A hex code writes each channel as two base-16 digits, so for a channel written as digits $d_1 d_2$ the value is

$\text{channel} = 16\,d_1 + d_2$

where the digits A to F stand for 10 to 15. Take #3b82f6:

• Red is 3b, which is $3 \times 16 + 11 = 59$.
• Green is 82, which is $8 \times 16 + 2 = 130$.
• Blue is f6, which is $15 \times 16 + 6 = 246$.

So #3b82f6 is rgb(59, 130, 246). Going the other way, tomato is rgb(255, 99, 71): $255 = 15 \times 16 + 15$ gives ff, $99 = 6 \times 16 + 3$ gives 63, and $71 = 4 \times 16 + 7$ gives 47, so #ff6347.

Where the hsl value comes from

The hsl value rewrites the same color as a hue, a saturation and a lightness. With the channels divided by 255, let $M$ be the largest, $m$ the smallest and $d = M - m$. Lightness and saturation are

$L = \frac{M + m}{2}, \qquad S = \frac{d}{1 - |2L - 1|}$

and the hue, when blue is the largest channel, is $H = 60 \times \left(\frac{R - G}{d} + 4\right)$ degrees.

For rgb(59, 130, 246), $M = 246/255 = 0.965$ and $m = 59/255 = 0.231$. Then $L = 0.598$, which is 60 %, and $S = 0.733 / 0.804 = 0.91$, which is 91 %. The hue is $60 \times \left(\frac{59 - 130}{187} + 4\right) = 217.2$, which rounds to 217. The result is hsl(217, 91%, 60%), the same blue you get from the Color Palette Generator when you enter #3b82f6.

Getting the right pixel

• Zoom for precision. At 100 percent one screen pixel may cover several image pixels. At 800 percent each image pixel is a large square, and the magnifier plus the arrow keys let you step onto exactly the one you want.
• A drag is not a click. When you drag to pan a zoomed image, no color is pinned.
• Large images. Pictures are read at up to 16 million pixels, so a very large photo may be read at a reduced size. The position shown with each color is a position in what was read.
• Rotated photos. The rotation stored in a photo's EXIF data is applied, so the picture appears the way you would normally see it.

Why a pixel may not match the design file

A JPEG stores an approximation of the original. Compression changes colors by a small amount near edges and sometimes in flat areas, so a fill that was #3b82f6 in the design tool can read as #3a83f5 in a JPEG, which is rgb(58, 131, 245). PNG and lossless WebP keep pixels as they were, so they are the better source when you need an exact value.

Colors are read as sRGB, the standard for web images. If a photo has an embedded wide-gamut profile, other software may show it differently, but the numbers here are the ones your browser displays on screen.

A screenshot of a web page or app gives exact colors, because the interface was drawn from flat values and a PNG screenshot keeps them. A photograph of a real object depends on light, the camera and white balance, so the same wall can read several slightly different colors from pixel to pixel. To judge a whole region rather than a single pixel, use the Average Color Finder, or use the Color Extractor to list the main colors of a picture.

Transparent pixels

If the pixel under the picker is almost fully transparent, the readout says it is transparent and shows its position. There is no color to report, so nothing is pinned. Move to a pixel that is drawn to pick a color. Pixels that are only partly transparent are reported by their color values.

Using the result

Copy a pinned hex code into your stylesheet, or take the rgb or hsl value if that is the format you need. To build matching colors around a pinned one, open the Color Palette Generator. If the image is too large to work with comfortably, shrink it first with the Image Resizer.

Frequently asked questions