Get the HEX Code from an Image

How it works

To get the HEX code of a colour out of an image, choose the file in the box or click to pick one, choose how many colours you want and press the button. The colours appear on screen as swatches, and the HEX value under each swatch is the same value written into the text file you download, so the code can be copied straight into CSS, Figma or a slide theme. The method is this: the image is drawn onto a small 64-pixel canvas, every pixel of it is read, and colours near one another are counted into the same bucket. Each channel is divided into steps of 32, which gives 512 buckets in all, so slight differences inside one tone count as a single colour. The most crowded buckets win, and the palette colour is the average of the pixels that landed in each one — not the centre of the bucket, which could name a tone the image never actually contained. The downloaded file holds one colour per line: the HEX code, the same colour written as RGB, and its share of the pixels that were counted. What the tool reports are the colours covering the most area; it does not let you click a single pixel, so if you are after the code of one small detail, crop the image to that detail first.

This tool is also known as hex code from image, get hex code from picture, html colour picker from image, hex colour code from photo, extract color palette from image, image colour extractor, dominant colour finder, photo colour palette generator.

What is Colour palette?

A colour palette is a limited set of colours chosen to be used together. The limit is the whole point: an interface or a presentation that stays loyal to three or four colours reads as deliberate, and beyond that the eye loses the order it was holding on to. A palette taken from a photograph arrives with an argument already made for it, because those colours were seen side by side under one light and did not clash there.

What is Dominant colour?

The dominant colour is the one covering the most area in an image, which is not the same as the one that catches the eye. A wide sky takes the largest share of a landscape, while what you actually look at may be a small orange jacket. The distinction matters when you use a palette: the dominant colour works as a background and the small-share, contrasting one as an accent, whereas giving the two equal area produces a design that fights itself.

What is HEX colour code?

A HEX code writes a colour as three pairs of base-sixteen digits after a hash, one pair per channel: #FF0000 is full red, #000000 is black, #FFFFFF is white. Each pair covers the same 0 to 255 range that RGB writes in decimal, so nothing is lost or gained in moving between the two. The form became standard on the web because it is short, unambiguous and safe to paste, and every design tool now reads and writes it.

HEX or RGB — what is the difference?

They are two spellings of the same colour rather than two different colours. RGB gives the three channels as decimal numbers from 0 to 255, which is the form CSS, office software and most image editors expect to receive. HEX packs those same three numbers into base sixteen behind a hash — #1E90FF is red 30, green 144, blue 255 — which is shorter to type and is what web and design tools use by default. Neither is more accurate than the other, and converting between them loses nothing at all. The palette file gives you both on the same line, so the choice is only ever about the field you are pasting into.

How to get a HEX code out of an image

A HEX code is the form every stylesheet and design tool expects when you name a colour: six characters after a hash, such as #1E90FF. Choosing an image here and pressing the button turns the picture into exactly those codes, so a screenshot, a product photo or a logo becomes something you can paste into CSS, a brand document or a presentation theme without typing a colour by eye.

What comes back is the set of dominant colours, not the colour of one pixel you point at. The difference matters when you are chasing one small detail — a logo mark sitting on a busy photograph, for instance. Crop the image down to that detail first, and the colour you were after is reported as the dominant one.

What a palette is for

Matching a design to a photograph works when the colours are measured rather than guessed at by eye. Picking a button colour from a product shot, building a presentation theme around a painting, or recovering the exact tone a brand used in an old image are the everyday jobs this tool is for.

You are not obliged to use everything it finds. Most designs hold together on one dominant colour, one contrasting colour and one neutral; the rest of the list is there as options, and adding more of them usually makes a layout noisier rather than richer.

Why the same image can give different answers

A palette is a summary, not a measurement. The ordering shifts with the number of colours you ask for: at four, two neighbouring tones are counted under one heading, while at eight the same two can separate into their own lines.

Cropping changes the outcome as well, because the calculation is based on how much area a colour occupies. Take the sky out of the frame and the share of blue collapses. If you are after the colour of one particular region, crop the image down to that region first and extract the palette afterwards.

Transparent areas are not counted

Transparent pixels in a PNG are skipped entirely; only the areas that were actually painted are counted. On a logo with a transparent background the palette therefore consists of the logo's own colours, with no invented white or black creeping in from the empty space.

Semi-transparent pixels are counted at their own value, without being blended with whatever would sit beneath them. In a file built from many overlapping translucent layers, the palette can therefore differ a little from what your eye sees on screen.

Frequently asked questions

How do I get the HEX code from an image?

Choose the image, pick a palette size and press the button. Every swatch on screen carries its HEX code underneath, and the downloaded text file repeats the same codes next to their RGB equivalents, ready to paste into CSS or a design tool.

Why are HEX and RGB both written out?

They are two spellings of one colour. HEX is what web and design tools expect, RGB is what CSS, office software and most presentation programs take without complaint. Both sit on the same line so you can take whichever the field you are pasting into wants.

Are the colours exactly the pixels in the image?

No. Near tones are collected into one bucket and the palette colour is that bucket's average, so the value is representative rather than literal. If you need the exact value of one specific pixel, what you want is an eyedropper, not a palette extractor.

What does the percentage mean?

It is that colour's share of the pixels that were counted. A colour at 40 percent covers about two fifths of the painted area of the image. Transparent pixels are left out of the total, so the shares describe the visible part of the picture only.

Will a very large image be slow?

No. The image is first drawn onto a small canvas and the counting is done there, so a 24-megapixel photograph is reduced to a few thousand pixels before a single one is read. The result comes back immediately, and the palette barely differs from one taken at full size.