How to Match a Brand Colour from a Logo or Photo

A brand colour is a specification, even when the only copy is a logo on a website. Sampling it should be simple: open the image, click the colour, copy the code. In practice, logos are compressed, anti-aliased, gradient-filled, or photographed under mixed light. A single click can give a value that is technically in the file but wrong for the brand.

Colour Picker reports the pixel you click, and it keeps a palette of the colours you pick. The method below is about choosing pixels that represent the brand rather than the artefacts around it.

Find the best source

A brand guide is the best source because it states the intended values and often gives print equivalents. A vector file such as SVG, PDF, or EPS is next, because the colours are stored as flat fills rather than compressed pixels. A large PNG is usable. A JPEG or a screenshot is the last resort, because compression and resizing introduce values that were never in the original.

If the only source is a photograph of a sign or a product, look for even lighting and avoid a strong colour cast. Daylight is more neutral than indoor tungsten, and a photo taken in shade will push the colour blue. The sample will still be a record of that light, not a specification.

Sample the flat areas, not the edges

Zoom in before you sample. Edges are unreliable because anti-aliasing blends the logo with the background, and JPEG compression leaves small colour shifts around sharp boundaries. Highlights and shadows show the light, not the surface. Pick a flat patch in the middle of each colour and take several samples nearby.

If the values differ slightly, choose the one that repeats most often rather than the brightest or darkest. For a gradient, sample the midpoint of the range you want to reproduce. The Colour Picker palette makes it easy to compare several picks side by side.

Understand the limits of a screen sample

A hex code describes a colour in a screen colour space, usually sRGB. The browser, the monitor, and the image’s colour profile all affect what you see. A logo saved without a profile may be interpreted differently by different programs. Two people can sample the same file and get slightly different values without either being wrong.

Compression matters too. A logo on a white background may have a pale halo around its edges; a logo on a dark background may have a dark fringe. Sampling the halo gives a washed-out colour. Sampling the centre of a large flat area avoids both.

Match across screen and print

For web work, the sampled hex is usually enough. Use it consistently for buttons, links, and accents, and check contrast before putting text on it. For print, a hex code is not an ink specification. Printers work with CMYK or spot colours, and the result depends on the press, the paper, and the profile. Ask for the brand guide or a physical swatch, and have a proof made before a full run.

For the general method, read How to Pick a Colour from an Image and Use Its Hex Code. For the meaning of the different codes, see Hex, RGB, and HSL: What Colour Codes Mean.