How to use the image color picker
- Choose a picture (PNG, JPEG, WebP, GIF, BMP or AVIF) or drop it on the box. It is drawn on this page and never uploaded.
- Click or tap the picture to read the color at that spot. A square marker shows where you picked. Or type the position in pixels, or use the Left, Right, Up and Down buttons to move one pixel at a time.
- Use Area to average to read the mean color of a small square instead of one pixel. This smooths out noise in photos.
- Press Copy hex, Copy RGB or Copy HSL. Below the picture, Main colors of the picture lists the dominant colors with their share, and clicking one copies its hex code.
The same color in three notations
A bright orange with red 255, green 128 and blue 0 is #ff8000 in hex, rgb(255, 128, 0), and hsl(30, 100%, 50%) because its hue sits 30 degrees around the color wheel, it is fully saturated and its lightness is 50%. A muted brown with red 200, green 100 and blue 50 is #c86432, or hsl(20, 60%, 49%).
To average a block, take the 3 by 3 area centered on a pixel at the edge between a black half and a white half of a picture. It covers one black column and two white columns, so each channel averages (0 + 255 + 255) / 3 = 170, which is #aaaaaa.
How the colors are read
The picture is drawn onto a canvas, and the color of a pixel is read back as red, green and blue values from 0 to 255. Hex is the same three numbers written in base 16. HSL describes the color as hue in degrees, saturation and lightness in percent, which is often easier to adjust by hand. Transparent areas are treated as white.
The main colors list uses median cut. The pixels are split in two at the middle of the color channel with the widest spread, again and again, until there are as many groups as colors you asked for. Each swatch is the average of its group, and the share is the portion of pixels in it.
Getting accurate results
Photos have noise and gradients, so a single pixel may differ from the color your eye sees. Averaging a 5 by 5 or 11 by 11 area gives a steadier value. Colors are read as the browser shows them, so a picture with an embedded color profile can differ a little from what a design program reports. Very large pictures are scaled down to 2000 pixels on the long side before picking.
To build a set of matching colors from the result, try the color palette generator, check readability with the color contrast checker, see how colors look to people with color blindness in the color blindness simulator, or choose a color without a picture in the color picker.
Assumptions and limits
- The position boxes count pixels from the top left corner, starting at 0, on the picture as it was drawn here.
- SVG files are not accepted. Export the drawing as a PNG first.
- Pictures up to 25 MB and 120 megapixels are read. Larger ones are refused with a message.
- The palette is a summary, so two runs on the same picture always give the same colors, but different tools may choose different groups.
Frequently asked questions
How do I find the hex code of a color in a picture?
Add the picture, click the spot, and the hex code appears with the RGB and HSL values. Press Copy hex to put it on your clipboard.
Why does the color differ from what I see on screen?
Single pixels in photos carry noise, and displays and color profiles shift colors slightly. Average a larger area for a steadier value, and expect small differences from other programs.
How are the main colors of the picture chosen?
The tool splits the pixels into groups with the median cut method and shows the average color of each group, ordered by the share of the picture each one covers.
Can I pick a color with the keyboard?
Yes. Type the position into the two boxes, or use the Left, Right, Up and Down buttons to move the picked spot one pixel at a time.