How to find the hex code of a color in an image

Get the exact hex codes from a logo, photo or screenshot, match brand colours in a design and avoid the colour shifts that JPG compression causes.

By Utility Mule editorial team · Last updated September 30, 2026 · How we write guides

Matching a colour by eye is slow and never quite right. Every colour on a screen has an exact value, usually written as a six-character hex code such as #1A73E8, and design tools, websites and slide software all accept it. Getting that code out of an image takes seconds.

Getting the colours

Drop, choose or paste an image into Color palette. Pasting works straight from a screenshot. The tool finds the main colours and lists them in order of how much of the picture each one covers, with the hex code, the RGB value and the share of the image.

Use the Colours slider to choose how many to extract, from 2 to 12. A logo usually needs two to four; a photo needs more to capture its range. Copy a single code, or copy them all as a hex list, CSS variables or JSON.

Transparent pixels are ignored, so a logo saved with a see-through background gives you only the colours of the logo itself.

One specific colour

The palette shows the main colours, not every pixel. To get the colour of a small detail, such as a button in a screenshot or the stripe on a jersey, crop the image down to that area first. With little else left, the detail becomes the main colour and comes out first in the list.

Why codes come out slightly off

Colours in an image aren’t always the colours that were designed:

• JPG compression smears colour slightly, especially along edges and in small areas, so a flat brand blue might come out a few values different.
• Screenshots pass through the screen’s colour profile, which can shift every colour a little.
• Photos of a printed logo include lighting, shadows and the camera’s own colour handling.

For brand colours that must be exact, use the official codes from the brand guidelines, or extract from a PNG or SVG version of the logo rather than a JPG. Lossless formats keep flat colours exactly; which image format should I use? explains the difference.

Using the codes

Hex codes paste directly into CSS, Canva, Figma, PowerPoint, Google Slides and most other tools. The CSS variables export is ready for a stylesheet. Typical uses:

• Matching a website’s theme or browser colour to a logo when you make a favicon.
• Picking a border or background colour that belongs to a photo, as in adding a border to a photo.
• Recreating a chart or slide in a client’s brand colours.

Print is different

Hex codes describe colours on screens, which mix light. Printers mix inks (CMYK), and some bright screen colours can’t be printed exactly. If the colour matters in print, ask the printer for a proof or use the brand’s CMYK or Pantone values.