How to use it
- Open an image, or paste a screenshot.
- Move over the picture. The magnifier shows the exact pixel being read.
- Click to save a colour to the list, and click any code to copy it.
Reading the codes
HEX, like #A94F2B, is the format used most in web design, CSS and design apps. It is the red, green and blue values from 0 to 255 written in base 16. RGB shows the same three numbers in decimal. HSL describes the colour as hue (an angle round the colour wheel), saturation and lightness, which is easier to adjust by hand: to make a lighter tint of the same colour, raise the L value. If you need to convert between HEX and RGB elsewhere, StatGarden's hex to RGB converter shows the working.
Why a photo gives you so many slightly different colours
A red car in a photo is not one red. Light, shadow, reflections, sensor noise and JPG compression mean neighbouring pixels differ, often by a few values. That is why the magnifier is there: you can see whether you are on a representative pixel or a stray one. For the overall colours of an image rather than a single pixel, the palette extractor averages them for you.
Colours are read after your browser has converted the image to standard sRGB. If a design tool gives slightly different values for the same file, it may be working in a different colour space; our article on why colours shift explains.
Questions people ask
How do I find the HEX code of a colour in a picture?
Open the image here, move to the colour and read the HEX code. Click it to copy.
Can I pick a colour from my screen?
Take a screenshot, then paste it here with Ctrl+V or Cmd+V.
Why is the colour slightly different from the brand colour?
Photos and compressed images shift colours a little. For exact brand colours, check the brand guidelines or the original design file.