Image Color Picker: Get a Color Code from a Photo

How do I pick a color from an image?

Choose a picture and the Colors tool opens. Tap or click any point, or drag across the picture, and the swatch shows the color with its HEX, RGB and HSL values. A ring marks the point you picked. Press Copy beside a value to put it on the clipboard and paste it into your design or code.

1. Press Choose a picture, drop a file, paste with Ctrl+V, or press Take a photo on a phone.
2. Tap or click a point on the picture. Drag to move the picker and watch the values change.
3. Choose 1 pixel, 3 x 3 average or 5 x 5 average to set how much of the picture is read.
4. Press Copy beside HEX, RGB or HSL.
5. To zoom into a small detail first, press Zoom and pan instead, zoom in, then switch back to picking.

To cut out the part you want before reading its colors, use Crop Image. To change the colors afterward, try Photo Filters.

What are HEX, RGB and HSL color codes?

All three describe the same color. RGB gives the red, green and blue amounts from 0 to 255. HEX writes those three amounts as a six-digit base-16 code after a hash sign. HSL describes the color as hue in degrees, saturation and lightness in percent, which is easier to adjust by hand.

Web pages accept all three in CSS. The MDN reference for the CSS color type lists the notations, and the Wikipedia article on HSL and HSV explains the hue, saturation and lightness model. The tool rounds each value to a whole number.

Why would I average several pixels instead of picking one?

A single pixel in a photo carries camera noise and sharpening, so two neighboring pixels of a wall can differ slightly. Averaging a 3 x 3 or 5 x 5 area gives the typical color of that spot, which is usually the color you mean. Use 1 pixel for flat artwork and logos.

A worked case: a 3 x 3 area has eight pixels of 200, 100, 50 and one black pixel in the middle. The average is (8 x 200) / 9 = 178 for red, (8 x 100) / 9 = 89 for green and (8 x 50) / 9 = 44 for blue. At the edge of the picture the area is cut to the pixels that exist.

How do I get the main colors of a picture?

The Colors tool lists the dominant colors of the whole picture under the swatch, biggest share first. Choose 5, 6 or 8 colors with the buttons, and press a color to read its codes. The picker groups similar colors with the median cut method, the same step the GIF Maker uses to build a palette.

For flat artwork the palette is exact. A picture of four red pixels, two blue and two white gives #FF0000 50 percent, #0000FF 25 percent, #FFFFFF 25 percent. A photo has thousands of shades, so each palette color stands for a group of close shades, and its share counts every pixel nearest to it.

How accurate is the color the picker shows?

The values come straight from the picture's pixels, so they match what the file holds. Your screen, its brightness and a phone's night mode change how the color looks, but not the code. For a very large photo the picker reads the preview copy, which is at most 2,048 pixels on the longest side.

Colors in a JPG file were already changed a little by compression, and a photo of a real object also depends on the light at the time. The picker reports the file, not the object. Edits you make in the editor, such as a filter, are included in what it reads.