How to Get the Hex Code of a Color From an Image

The fastest route: a palette tool in the browser

If you want the colours an image is made of — a brand colour from a logo, the main tones of a photo for a design — a palette extractor is faster than hunting with an eyedropper, and it gives you a more useful answer.

Drop the image into the image colour picker, choose how many colours you want, and it returns each one as a hex code and an RGB value with the share of the image it covers. It runs in the browser, so the image is not uploaded, which matters for client work and unreleased designs.

The reason this beats an eyedropper for most jobs: a logo that looks like one blue is, at pixel level, dozens of slightly different blues because of anti-aliasing and compression. The palette tool clusters them and gives you the centre, which is the value the designer actually chose.

• Open the image colour picker and drop the image in.
• Set the count: 2 or 3 for a logo, 5 for a general palette, 8 to 10 for a busy photo.
• Copy the hex code next to the swatch you want.

When you need one exact pixel: the browser eyedropper

Chrome and Edge include an eyedropper in DevTools that reads any pixel on screen, including inside images. Right-click the page, choose Inspect, click any colour swatch in the Styles panel, and the picker that opens has an eyedropper icon. Click it, then click the pixel you want; the hex value appears in the swatch.

This is the right tool when the colour is a single flat area — a button, a background — and you need that exact value rather than an average. It is the wrong tool for a photo, where the pixel under your cursor is a random sample of noise and JPEG artefacts and the pixel next to it is different.

Firefox has the same thing under the Tools menu as Eyedropper. Safari does not, but macOS has the Digital Color Meter app in Utilities, which reads any pixel on screen and can show hex.

Inside a design tool

Figma: place the image, select any shape, click its fill, and press I to activate the eyedropper. Click anywhere on the image. Figma's picker also has an Image tab when the fill is an image, which shows the dominant colours it has extracted — the same idea as the palette tool, with fewer controls.

Canva: select the image, then in the colour picker for any element use the eyedropper icon, or look at the Photo colours row which lists a handful of colours Canva has pulled from the image.

Photoshop and Affinity: the eyedropper tool has a sample size option. Set it to a 5 by 5 or 11 by 11 average rather than point sample before reading a photo, otherwise you get pixel noise.

Getting a value you can trust

Use the least compressed copy of the image. A JPEG that has been through a messaging app carries blocky artefacts around edges that shift colours by a few points, which is enough to make a brand colour visibly wrong at scale.

Read a flat area, not an edge. Anti-aliasing blends an edge pixel with its neighbour, so a red logo on white has pink pixels along its outline that were never in the design.

For a photograph, prefer an average or a cluster over a single pixel. Skin, sky, wood and fabric all vary continuously, and the useful colour is the one your eye sees across the region, not any one point in it.

Check the result against the source at full size before committing. Colour looks different next to white than next to black, so paste the hex into a swatch beside the original.

Hex, RGB and the rest

A hex code is #RRGGBB: three pairs of hexadecimal digits for red, green and blue from 00 to FF. #C8553D is red 200, green 85, blue 61. Any tool that takes one takes the other; CSS accepts both and modern CSS also takes hsl() and lab().

A hex code describes a colour on screen in the sRGB space. It does not describe ink. If the colour is going to print, your printer will want CMYK or a Pantone reference, and the conversion is approximate — bright greens and oranges in particular do not survive it. Get a physical swatch matched rather than trusting a converted value.

Eight-digit hex codes like #C8553D80 add an alpha channel for transparency. If a tool hands you one and you only want the colour, drop the last two characters.

Frequently asked questions