How to pick a color from an image: HEX, RGB and HSL explained

How picking a colour from an image works

An image is a grid of tiny pixels, and each pixel stores a colour as three numbers: how much red, green and blue light it contains. A picker simply reads those numbers for the pixel you click and shows them in the formats designers use.

HEX codes

A HEX code is a six-digit code starting with #, such as #FF5733. It is three pairs of digits for red, green and blue. Each pair is a number from 00 to FF in base 16, which is 0 to 255 in everyday numbers.

In #FF5733, FF is 255 red, 57 is 87 green and 33 is 51 blue. HEX is the standard way to write colours in CSS and in most design tools.

RGB values

RGB writes the same three numbers in everyday decimal, such as rgb(255, 87, 51). It is easier to read and to adjust by hand. Pure red is rgb(255, 0, 0), black is rgb(0, 0, 0) and white is rgb(255, 255, 255).

HSL values

HSL describes a colour as hue, saturation and lightness. Hue is the position on the colour wheel from 0 to 360 degrees, saturation is how vivid the colour is and lightness is how light or dark. It is the easiest format for making a lighter, darker or less intense version of the same colour, because you change only one number.

Getting an accurate colour

• Photos contain noise and shading, so nearby pixels differ slightly. Click a few places and compare.
• Pick from flat areas, not edges, where blurring mixes two colours.
• JPG compression shifts colours slightly. A PNG or the original file gives the truest values.
• Lighting changes how a colour appears in a photo. The code tells you what is in the file, not what the real object looked like in person.
• Screens and colour profiles vary, so the same code can look a little different on different displays.

Matching a brand colour

1. Open a clean version of the logo or website screenshot, ideally at full size.
2. Click inside a large, flat area of the colour you want.
3. Copy the HEX code and test it in your design.
4. Check the main colours list to see if the image has a few dominant shades you can use as a palette.

Check that the colours work together

Text needs enough contrast against its background to be readable. The colour contrast checker compares two colours against accessibility guidelines, which matters for people with low vision. Light grey text on white, for example, often fails.

To convert a picked colour between HEX, RGB and HSL, use the colour converter. To build a smooth blend between two colours for a website background, try the CSS gradient generator.