Image color picking — Settings and quality

Worked example

Choose where to click and which output to copy: HEX for design tools and CSS, or rgb(r, g, b) when code needs separate channels.

HEX is always six digits in capitals, for example #6D28D9, which equals rgb(109, 40, 217). Copy the HEX when you paste into a CSS custom property or a design tool, and the RGB text when you need to add transparency later as rgba. Each value has its own copy button, and a check mark confirms the copy for about a second.

A packaging designer matching a label to a photograph of a box should click three to five points across the same colour area and compare them. If the numbers differ by one or two units per channel in a PNG, that is normal; if they differ by 10 or more, the area is a gradient or the source is a heavily compressed JPG.

The usual mistake is choosing a single click on a shadowed or highlighted spot and treating it as the brand colour. Pick the mid-tone of the flat area, and for a gradient record the first and last stop separately instead of one average.

Tradeoff: a larger image lets you place the click more precisely, and a lossless PNG gives repeatable numbers, while a small JPG saves bandwidth but moves values by a few units. For approvals that matter, ask the owner for the official HEX and use the picker only to confirm it.

Pixel selected in an image

HEX and RGB values

The tool reports an exact pixel, not a perceived colour, so lighting and display calibration do not change the numbers it shows.