Image Color Picker

What a pixel colour actually is

A colour in a digital image is three numbers, one each for red, green, and blue, each running from 0 to 255. Zero means none of that channel and 255 means all of it. A hex code is the same three numbers written in hexadecimal, which is a more compact way of writing the same value, so 255 becomes FF. That is the whole system, and it is worth understanding because a hex code is not a different colour, it is the same colour written differently.

NoteA hex code and an RGB triplet are the same colour written two ways.

The problem with picking a colour from a photograph

A single pixel in a photograph is rarely the colour anyone wants, because a photograph contains gradients, shadows, and noise. The exact value under the cursor might be a slightly darker version of the perceived colour, or a value distorted by the lighting. For a product or brand colour, the correct approach is to pick a pixel from a flat, evenly lit area of the actual product, and to pick the same area across several shots to check the value is consistent. Picking from a strongly lit area gives a washed out value, and picking from shadow gives a much darker one.

• One pixel in a photograph is rarely the colour the eye perceives.
• Pick from a flat, evenly lit area of the subject.
• Avoid strong highlights and deep shadow.
• Check the same colour across several photos for consistency.
• A lit area gives a washed out value, a shadowed one gives a dark value.

NoteFor a brand colour, pick from a flat area of the product, not from a highlight.

When the picked value will not match

There are three reasons a picked hex code produces a different colour when you paste it somewhere, and all three are common. The image may carry a colour profile, which tells software how to interpret the values, and a program that ignores it will show a different colour. The second reason is colour space, since an image from a wide gamut display or a scanned print can contain values outside what a standard monitor can show. The third is that the destination applies its own colour management. Converting the image to a standard profile before picking resolves most of this.

Other formats you may need

Hex and RGB cover most web work, and the same values translate to HSL and CMYK when a print or design tool needs them. HSL describes a colour by hue, saturation, and lightness, which is closer to how a person reasons about adjusting one, so it is often easier to make a lighter version of a picked colour in HSL than by guessing new RGB numbers. CMYK is a subtractive model used by print, and the conversion from a screen colour is approximate, because a bright screen colour may simply have no ink equivalent.

• Hex and RGB are the same values, for the web.
• HSL is easier to reason about when lightening or darkening a colour.
• CMYK is used by print, and the conversion is approximate.
• A screen colour may have no clean ink equivalent in CMYK.