How to get the hex code of a colour from an image or screenshot

Open Color picker, choose the image, point at the colour and click (or press, drag and lift on a phone). The hex code appears with a Copy button, next to the same colour in RGB and HSL. A magnifier shows the pixels under your pointer, so you land on the exact one.

Steps

1. Open Color picker and drop in a photo, logo or screenshot. JPG, PNG, WebP and GIF work.
2. Move the pointer over the image. The magnifier shows an 11 × 11 pixel grid around it, with the centre pixel marked.
3. Click when the centre pixel is the colour you want. On a phone, press and drag to move the magnifier, then lift your finger to pick.
4. Under the colour card, press Copy next to HEX, RGB or HSL.
5. Pick again to replace it, or switch Pick into to Background to keep a second colour.

Getting the colour you meant

A colour that looks flat often is not. Photos have noise, gradients and shading, and logos in screenshots have soft edges where the colour blends into the background. That is why the magnifier matters:

• Pick from the middle of an area, not its edge. Edge pixels are blends of two colours.
• Avoid shadows and highlights on objects. A red mug has dozens of reds; decide which one you want.
• Use the original file where you can. A screenshot of a compressed photo carries the compression's colour shifts too.
• Zoom with the magnifier, not your eyes. If neighbouring pixels in the grid differ, move one step with the arrow keys before picking.

From the keyboard, select the image, move with the arrow keys (Shift moves further) and press Enter to pick.

Hex, RGB and HSL: which to copy

All three describe the same colour. You can also type or paste a value in any of them into a colour's field, and the other two update straight away, so the page doubles as an RGB to hex converter with no image at all.

Build a palette from the same image

As soon as the image opens, the tool lists its main colours. Choose 5, 6, 7 or 8 under Palette size. Each entry shows roughly how much of the image it covers, and tapping one uses it in the current colour card.

Palette colours are averages of groups of similar pixels, found by a fixed method called median cut, so the same image always gives the same palette. An average can be a shade no single pixel has. When you need an exact brand colour, pick it from the image instead.

To use the palette elsewhere, choose CSS variables or JSON under Export palette and press Copy, or save it as a file.

Questions

Is the picked colour exact?

Yes. A picked pixel's value is read straight from the image. If the image was compressed, you get the compressed pixel's colour, which may differ slightly from the colour the designer chose.

Can I pick a colour from a website?

Take a screenshot of the page, then open the screenshot here. Screenshots saved as PNG keep colours exactly.

Can I check if text in these colours is readable?

Yes. Pick a text colour into Foreground and the background into Background, and the contrast check shows a ratio with Pass or Fail. See checking colour contrast from a screenshot.

Is my image uploaded?

No. The picker reads the image in your browser, and it is not sent to a server.