How to use Colour Picker from Image
- Choose one image in the Image field.
- Click the pixel you want, or type its column and row for an exact position.
- Raise the Zoom level when the pixel you need is hard to hit.
- Select Read the colour, then copy the HEX, RGB, HSL or alpha value.
Example: Colour Picker from Image
Read one pixel from a small PNG.
Options
- Zoom level
- Whole numbers from 1 to 4. Zoom enlarges the preview so you can aim at the right pixel; it does not change the reading.
- Pixel column from the left and Pixel row from the top
- Coordinates start at 0 in the top-left corner. A large image is scaled to fit, so typing them beats clicking.
Supported inputs and limits
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
What the reading is, and what it is not
The tool reports the pixel the browser decoded, before anything is drawn on top of it. That is the number to reuse from a logo: the stored value, not the color you would see after it sits over a page background. Wide-gamut profiles and decoder rounding can shift a channel slightly, so the result describes the decoded pixel rather than the original ICC color.
HSL follows the CSS Color specification
The HSL figure uses the definition the CSS Color specification gives for hsl(): hue in degrees, saturation and lightness as percentages. A partly transparent pixel keeps its hue and saturation instead of collapsing to black, so the hue you copy still describes the color.
Questions about Colour Picker from Image
Why does a pixel taken from an edge look wrong?
Edges are drawn with antialiasing, which blends the shape color into whatever sits behind it. Zoom in and aim at a run of identical pixels inside the shape.
Do I need the HEX, RGB or HSL value?
They describe the same pixel three ways. Use HEX or RGB in CSS and design tools, and HSL when you want a lighter or darker shade of the same color.
Why does the tool report an alpha value?
The reading is the stored pixel, including its own transparency. A half see-through pixel keeps its color and reports alpha below 255.
Will the value match my design file exactly?
Not always. Colors come from the decoded image, so an embedded profile or the decoder can shift a channel slightly. Treat the result as the browser's reading.
Can I pick a color from a screenshot?
Yes, if the screenshot is saved as JPEG, PNG or WebP. A screenshot from a scaled display holds the blended pixels the screen produced, so read a solid area rather than an edge.