Skip to content

Pick colours from an image

Click any pixel to get its HEX, RGB and HSL code, and extract the dominant colour palette.

Loading tool…

Drop a file here or click to browseAccepts JPG, JPEG, PNG, WEBP, HEIC, HEIF, GIF, BMP, AVIF. Up to 50.0 MB per file.

How it works

Matching a brand colour from a logo, reusing a shade from a photo in a slide, or checking what colour a screenshot really uses all start with reading a pixel. Click or tap anywhere on the image to read its colour; a magnifier loupe shows the surrounding pixels enlarged so you can land on the exact one.

Each colour is shown as HEX, RGB and HSL with one-click copy buttons. The palette panel finds the 5 to 10 dominant colours with the median-cut algorithm on a scaled-down copy of the image and shows roughly how much of the image each covers. Images larger than 3000 px on the longest side are read from a scaled copy, so a single pixel there is an average of a few original pixels.

Using the codes

WhereFormat to copyExample
CSS, HTML, most web toolsHEX#0B7A70
Canva, Figma, PowerPointHEX (paste into the colour field)#0B7A70
Excel, Word, older design appsRGBrgb(11, 122, 112)
Making a lighter or darker shadeHSL (change the last number)hsl(175, 83%, 26%)

For text on a coloured background, check the contrast before you publish; dark text on a pale picked colour is usually safer than the other way round.

How to use it

  1. Drop an image or click to browse.
  2. Move over the image to see the loupe, then click or tap to pick. With a keyboard, focus the image, move with the arrow keys and press Enter.
  3. Copy the HEX, RGB or HSL value you need.
  4. Choose how many palette colours you want and click a swatch to copy its HEX code.

Frequently asked questions

Why is the colour slightly different from what a design app shows?

Browsers convert images that carry an embedded colour profile to sRGB when decoding, and JPG compression shifts colours slightly block by block. Values can differ by a few units from the original design file; for exact brand colours, check the brand guidelines.

How is the palette calculated?

The image is scaled to about 160 px, transparent pixels are ignored, and median cut repeatedly splits the colour range at the median of its widest channel. Each resulting group is averaged into one colour and sorted by how many pixels it holds.

Can I pick colours from a screenshot of a website?

Yes. Take a screenshot, save it as PNG (lossless, so colours stay exact) and drop it here.

Is the image uploaded?

No. The image is decoded and read in your browser only.

Related tools