Image color picking — Delivery workflow

Worked example

Record four things together: the color role, the HEX, the RGB text and the source image, so nobody guesses where it came from.

A simple table works well: Role (primary button), HEX (#6D28D9), RGB (109, 40, 217), Source (logo-v3.png, centre of the large shape). Because the tool shows no pixel coordinates, describe the spot in words or mark it on a copy of the image. Developers can then paste the HEX straight into a CSS custom property such as --brand-primary: #6D28D9; and keep one definition for the whole site.

A small agency building a site from a client mood photo might send the developer three rows, background, text and accent, each with its source file. When the logo changes, they repeat the clicks on the new file and update only the rows that moved, which keeps versions comparable.

The usual mistake is passing a colour around in a screenshot or a chat message without a name, after which the shade drifts every time someone re-samples it. Save the values in a shared style sheet or design tokens file and give each an agreed name instead.

Keep the original image next to the table, and note that screen values are not print values. If the colour will be printed, hand the same swatch to the printer and ask for a proof, rather than assuming the HEX converts exactly.

Pixel selected in an image

HEX and RGB values

The HEX and RGB in your hand-off describe pixels in one image; they do not replace an official brand guide.