Upload an image and click anywhere to pick the exact color value in HEX, RGB, and HSL format.
Color Picker from Image reads the color at a point you choose in an uploaded picture. Select an image, click a visible pixel, and it reports that sample as HEX, RGB, and HSL for use in design or CSS work. The important distinction is that this is a point sampler, not a palette extractor: one click represents one pixel location, and a nearby antialiased, compressed, or shaded pixel may have a different value. Processing stays in the browser, so the image file is not uploaded.
A concrete input and expected output from the current implementation.
Input
Upload a solid red image whose pixels are all RGB 255, 0, 0, then click anywhere inside it.
Expected output
HEX: #FF0000; RGB: 255, 0, 0; HSL: 0 degrees, 100%, 50%
Full red with no green or blue is FF0000 in hexadecimal. Its HSL equivalent has a red hue, full saturation, and 50% lightness.
After you choose an image, the displayed picture becomes the sampling surface. A click selects one coordinate, and the reported color comes from that position. Location is critical around thin lines, text edges, gradients, shadows, and JPEG artifacts, where neighboring pixels often differ. Click another nearby point if the first sample does not represent the area you intended to inspect.
The result expresses the selected color three ways. HEX encodes the red, green, and blue channels as hexadecimal pairs; RGB shows those channel levels numerically; HSL describes hue, saturation, and lightness. These are alternate descriptions of the sampled color, not three independent measurements. Displayed HSL values can require rounding, so a later conversion may differ slightly for some colors.
No. It reports the color at the location you click. You can inspect a small palette by sampling several representative locations, but those samples do not show how frequently each color occurs across the image. Determining dominant colors or color proportions requires a palette or histogram analysis tool.
Not necessarily. The advertised outputs are HEX, RGB, and HSL color values. Unless the displayed result explicitly includes an alpha component, those values do not fully describe transparency. A semitransparent pixel's visible appearance can also depend on the color behind the image, so verify transparency separately when it matters.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.