How to Pick a Colour from an Image and Use Its Hex Code
Matching a colour by eye is unreliable. Screens render it differently, the colours around it shift your perception, and “that green” is not a specification anyone can build from. A hex code is.
Image Colour Picker reads the pixel under your cursor and gives you its hex and RGB values. The difficult part is choosing a pixel that represents the colour you actually mean.
Quick answer
Click a flat, evenly lit area of the colour, not an edge or a highlight. A hex code describes one pixel in sRGB, so a painted wall will give a slightly different value everywhere. Sample several spots and choose the middle value, or the one taken in neutral light.
What hex and RGB actually mean
A hex code such as #4A7C59 is three pairs of hexadecimal digits: red, green, and blue. Each pair runs from 00 to FF, which is 0 to 255 in decimal, so the same colour can be written as rgb(74, 124, 89). Both describe the same values; the hex form is shorter and more common in CSS.
The numbers assume sRGB, the colour space of most screens and web images. They do not describe a physical paint, a printed ink, or a colour under a particular lamp. A hex code is a recipe for a screen, not a guarantee for paper.
Choosing a pixel that represents the colour
Zoom in before you sample. Edges are unreliable because anti-aliasing blends the object with whatever is behind it, and JPEG compression leaves small colour shifts around sharp boundaries. Highlights and deep shadows are also misleading: they show the light, not the surface.
Pick a flat patch in the middle of the area, then sample two or three more points nearby. If the values differ slightly, choose a middle one rather than the brightest or darkest. For a gradient, sample the midpoint of the range you want to reproduce.
From one colour to a usable palette
A single colour rarely makes a design. You usually need a darker version for text, a lighter one for backgrounds, and an accent that sits well beside the first. A Colour Palette Generator can build those relationships from the hex you picked.
Check contrast before you commit. Light text on a mid-tone colour often fails to read, and colour alone should not carry meaning such as an error state or a required field. If the palette will be used for text, test the actual combinations rather than judging them on a swatch grid.
Screen colour is not print colour
A photograph records the colour of a surface under the light that was there. Indoor tungsten light pushes everything warm; shade pushes it blue. The same object photographed twice will give two hex codes, and neither is wrong.
That is fine for web work, where the sampled colour is the reference. For print or brand matching, treat the sample as a starting point and confirm against a physical swatch. If you are adding text to the image itself, the same contrast rule applies; Image Watermark places a mark you can position against a plain area.
Pick a clean patch, note the hex, and test it in context. Image Colour Picker gives you the number; the surrounding colours decide whether it works.
Common questions
Why do I get a different hex code every time I sample the same colour?
A hex code describes one pixel in sRGB, so a painted wall or a textured surface gives a slightly different value almost everywhere. Highlights and shadows also show the light rather than the surface. Sample a flat, evenly lit patch, take two or three nearby points, and choose a middle value rather than the brightest or darkest.
Can I use a hex code taken from a photo for printing?
Treat it as a starting point rather than a guarantee. A hex code describes a screen colour in sRGB, not a physical paint or a printed ink. Light also changes the sample: indoor tungsten pushes everything warm and shade pushes it blue. For print or brand matching, confirm the colour against a physical swatch.
Where should I click to pick an accurate colour from an image?
Zoom in and click a flat patch in the middle of the area, away from edges, highlights, and deep shadows. Edges are unreliable because anti-aliasing blends the object with the background, and JPEG compression leaves small colour shifts around sharp boundaries. Sample several spots and choose a middle value.