Image color picker - get HEX, RGB and HSL from a photo

The same color can be written in several ways, for example #336699, rgb(51, 102, 153) and hsl(210, 50%, 40%). HEX is the shortest form, used in CSS and in design tools such as Figma and Canva. RGB is handy in code and when you need transparency (rgba). HSL makes it easy to tweak hue, saturation and lightness, for instance to create a darker hover shade. For HSV, CMYK or OKLCH, use the color converter.

The tool samples up to 40,000 pixels of the image, skips transparent ones and then runs the median cut algorithm: the set of colors is repeatedly split along the channel (R, G or B) with the widest spread until the requested number of groups is reached. Each group’s color is the average of its pixels, and its percentage share reflects how many pixels fall into it. On a photo with a plain background, the first color is usually the background.

The most common mistake is sampling a shadow or a highlight: the same wall can differ by dozens of RGB units across one photo. The second is clicking right on the edge of an object. The “Picked colors” list keeps up to 14 recent samples, so you can compare several points and choose the most representative one.

You get the color of a specific pixel after the image is decoded. Images whose longer side exceeds 1800 px are scaled down to 1800 px for analysis, so one pixel in the tool may average several original pixels, and with fine details such as thin lines or text this can give an in-between color. In JPG files, neighbouring pixels can differ slightly because of compression, so click several points in the same area. Values are in sRGB, as the browser draws the image. A graphics program using a different color (ICC) profile may show slightly different numbers. The screen eyedropper (EyeDropper API) works in desktop Chrome and Edge; in other browsers, load a screenshot instead.