How to pick an exact colour from an image: HEX, RGB and HSL

To get the exact colour from an image, read the value of one pixel rather than estimating it by eye. Open the picture in the tool below, hover over the spot, click, and copy the HEX code. The reading is the stored value of that pixel, so it stays the same each time you pick the same spot in the same file.

Image colour pickerNeed the exact colour codeOpen

What a pixel stores

Each pixel is a tiny square of colour. On a screen or in an image file, it is stored as three numbers, for red, green and blue, each from 0 to 255. Pure red is 255, 0, 0. Those three numbers carry the same information in every format, so one colour can be written in several ways.

HEX, RGB and HSL

HEX writes each number in hexadecimal, two characters per channel. #FF0000 is pure red. Web pages, CSS and most design tools use it.
RGB writes the same numbers in decimal, as rgb(255, 0, 0). It is the same colour as the HEX code.
HSL describes the colour the way people talk about it. Hue is the angle around the colour wheel, saturation is how strong the colour is, and lightness is how light or dark it is. hsl(0, 100%, 50%) is pure red.

Use HEX when you paste a colour into code, RGB when a tool asks for it, and HSL when you want a lighter or darker version of the same hue. Changing only the lightness in HSL keeps the hue, which is harder to do with HEX by hand.

Here is a colour used in a stylesheet:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Why the code may not match the screen

The picture is compressed. JPEG saves space by smoothing fine detail, so pixels near an edge can differ slightly from the colour you see in the middle of an area.
Edges blend. Where two colours meet, the pixels between them are mixtures. They are not a colour in their own right.
Colour profiles differ. The picker reads the values the browser decodes, which are in sRGB. A photo saved with a wide-gamut profile can look different in other programs.
Scaling blends pixels. A screenshot taken at a scaled display size can have blended pixels. Take the screenshot at full size when you can.
Very large images are read from a copy. Images over 6000 pixels on the longest side are read from a 6000 pixel copy, so a single pixel can differ a little from the full-size file.

Pick from the middle of a flat area

Find a region of one colour, then move to its centre. The magnifier shows the 11 by 11 pixels around the pointer, so you can see whether the spot is mixed or flat. With the keyboard, move the crosshair one pixel at a time with the arrow keys, or ten at a time with Shift, and press Enter to pick. Check the readout before you copy it.

Use the palette for a scheme

A photo rarely has only one colour you care about. The palette lists up to six of its main colours. It works by rounding each pixel to 16 levels per channel, counting the groups, and keeping the most common groups that differ from each other. Each swatch shows the average of its group. Tap a swatch to copy its HEX code. Treat the palette as a starting point, because it is an average and not a measured brand colour.

Converting between formats

If a design tool asks for a different format, paste the HEX code into a colour converter. It converts between HEX, RGB and HSL without changing the colour, so the result matches the code you picked.

Recent picks and privacy

The tool keeps your last picks on the page so you can compare them. They live only in the memory of this tab and are gone when you close it. The image itself is read inside your browser and is never sent to a server.

Quick answers

Why does the colour look different on my screen? Your screen shows a colour-managed, scaled version of the file. Pick from the middle of a flat area and compare the HEX code against a known swatch.

Which format should I copy? HEX for web pages and most design tools. Use RGB or HSL when a tool asks for those.

Does the tool upload my image? No. The image is decoded and read inside your browser.