Color Picker from Image

Pick a colour out of any image in your browser. Nothing is uploaded.

Free, no limit Nothing uploaded No sign-up Works on mobile

Drop an image here

JPG, PNG, WebP, AVIF, BMP and GIF. Nothing is uploaded.

Choose a file

Drop an image to begin.

Point at a picture, get the code

Somebody sends a logo and asks for the website to match it. A photograph has exactly the green you want for a heading. A screenshot of an old design is all that survives of a brand's colours. In every case the colour exists and the number does not, and the number is what a stylesheet needs.

Drop the image in and click anywhere on it. The colour under your finger comes back as HEX, RGB and HSL, all three ready to copy, plus whether black or white text would be readable on it and by how much.

Underneath, the palette: the eight colours the picture is actually made of, largest share first. That is usually more use than any single pixel, because the colour somebody means when they point at a photograph is rarely the one exact dot they hit.

A colour being picked out of a photograph and shown as a hex code
How it works

Three steps, no upload

Your browser reads the pixels. There is no server involved at all.

1

Add an image

Drop it on the tool or pick it from your device.

2

Point at a colour

Click or tap anywhere on the picture, or use one of the palette buttons underneath.

3

Copy the code

HEX, RGB and HSL, each with its own copy button.

How a pixel becomes a number

The picture is drawn onto a canvas and read back as a grid of numbers, four per pixel: red, green, blue and how opaque it is, each from 0 to 255. Clicking works out which pixel you hit and reads those four numbers straight out of the grid.

HEX is the same three numbers written in base sixteen, which is why it is six characters: two for each channel. HSL is a genuine conversion, turning three amounts of light into a hue on a colour wheel, a saturation and a lightness. Nothing is approximated in either direction.

Reading pixels back off a canvas is something browsers deliberately restrict: an image loaded from another website cannot be read this way, because that would let any page inspect pictures it was only meant to display. A file you chose from your own device is allowed, which is the only kind this page ever handles.

Large images are drawn at a workable size first. A twelve megapixel photograph shown at its own size would be a canvas nobody could aim at, and the colours in it do not change when it is scaled.

The same colour, three ways

ColourHEXRGBHSL
White#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)
Black#000000rgb(0, 0, 0)hsl(0, 0%, 0%)
Pure red#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)
Pure green#00FF00rgb(0, 255, 0)hsl(120, 100%, 50%)
Pure blue#0000FFrgb(0, 0, 255)hsl(240, 100%, 50%)
Mid grey#808080rgb(128, 128, 128)hsl(0, 0%, 50%)

Two things are worth noticing. Grey has no hue and no saturation, whatever its lightness, which is why the first number of its HSL is zero and means nothing. And the three pure colours sit 120 degrees apart on the hue wheel, which is the whole idea behind it: hue is an angle.

What the palette underneath is doing

Every pixel is sorted into a coarse bucket by colour, the commonest buckets are taken, and each is then reported as the average of the pixels that landed in it. Eight of them, largest share first.

The averaging step matters more than it sounds. Reporting the centre of the bucket instead is quicker and turns pure black into a dark grey and pure white into an off white, which anyone looking at a logo notices immediately. Taking the mean of what actually fell in gives the colour that is really there.

The palette is usually what people want. When somebody points at a photograph of a shopfront and says "that blue", they do not mean the exact pixel their finger landed on, which might be a highlight or a shadow. They mean the blue the sign is mostly made of, and that is what comes out of the buckets.

Four jobs this actually gets used for

Matching a website to a logo

The commonest one by far. A client sends a logo as a PNG and nobody can find the brand guidelines, if they ever existed. Sample the flat areas rather than the edges, take the two or three colours the palette reports, and you have a starting point that is defensible because it came out of the file rather than out of memory.

Rebuilding a colour scheme from a screenshot

An old site, a competitor's page, a slide from a deck. A screenshot is usually a PNG, so its colours are exact rather than blurred by compression, and the palette will pull out the background, the text colour and the accent in one go.

Choosing text that will sit on a photograph

Sample the area the text will cover and read the contrast figure. If it comes back under 4.5, the text will be hard work for a lot of people, and the fix is a darker overlay or a different position rather than a different opinion.

Naming a colour somebody described

"That warm grey in the header." Point at it and you have a number both of you can agree on, which is the end of a conversation that otherwise runs for another two emails.

What runs through all four is the same thing: a colour in a picture is a fact, and the argument only exists while nobody has read it off.

The image never leaves your device

Reading colours out of a picture requires the whole picture, and an online tool that works the usual way requires you to upload it first. The images people sample colours from are brand assets, unreleased designs, screenshots of internal work and photographs of things that are not public yet.

None of that is sent anywhere here. Your browser already contains an image decoder and a canvas, which is everything the job needs, so the file is read from your disk into memory and never goes further. There is no request, no account, nothing stored and nothing for us to delete.

Disconnect from the internet once the page has loaded and it carries on working, which is the plainest demonstration available.

Which of the three notations to use

  • HEX, like #0439C3, is what most design tools and stylesheets use. Six characters, no punctuation, easy to paste anywhere.
  • RGB, like rgb(4, 57, 195), is the same colour written as three numbers from 0 to 255. Useful when something needs the channels separately, and the form transparency is added to.
  • HSL, like hsl(226, 96%, 39%), describes hue, saturation and lightness instead. It is the one to reach for when you want a lighter or darker version of the same colour: change the last number and the hue stays put, which is not true of HEX or RGB.

All three describe exactly the same colour. Nothing is lost converting between them, so pick whichever the thing you are pasting into expects.

Why the contrast figure is there

Because the question after "what colour is this" is almost always "can I put text on it". The number shown is the WCAG contrast ratio, which runs from 1 to 21, and 4.5 is the threshold ordinary body text is expected to meet. Black on white is 21, the maximum there is. A mid grey on white is around 4, which looks fine to the person who chose it and is hard work for a great many readers.

How this compares with the alternatives

A browser extension eyedropper

Convenient and it works on anything on screen, including video and other applications. It also asks for permission to read every page you visit, which is a large amount of access for a colour code.

The eyedropper in a design tool

The right answer if you already have Figma, Photoshop or Sketch open. This page is for when you do not, or when the image arrived by email and opening a design tool for one colour is more effort than it is worth.

An online picker that uploads

Does the same job on a server, which means the picture goes to a machine you know nothing about. For a photograph of a sunset, fine. For an unreleased logo, less so.

Guessing from a screenshot

The most common approach and the least reliable. Screen colour management, compression and your own eyes all shift what you think you are seeing, and a hex code read off a pixel is not a matter of opinion.

If something does not look right

The colour is not quite what I expected

You may have hit a highlight, a shadow or an edge pixel that is blending two colours together. Try the palette underneath the picture instead, which reports the colours the image is mostly made of rather than one dot.

A JPEG gives slightly different colours in different places

That is JPEG working as designed. It stores colour more coarsely than brightness and blends across small blocks, so a flat area is never perfectly flat. A PNG of the same graphic will be exact.

My iPhone photo will not open

iPhones save as HEIC and only Safari can decode it. On an iPhone or a Mac this page reads them normally. Elsewhere, convert first with our HEIC to JPG page.

The contrast number says my brand colour fails

Then it does, at that size. The 4.5 threshold is for ordinary body text; large text is held to 3. It is a measurement rather than an opinion, and it is worth knowing before the design ships rather than after.

Clicking does not work on my phone

Tapping should. If the picture is very wide it may be scrolled off to one side; the palette buttons underneath work regardless and are reachable with a keyboard too.

Free, with no account and no limit

No sign-up, no daily cap, nothing held back. The work happens on your device, so there is nothing to charge for.

If you already have a colour code and want it in another notation, our HEX to RGB and RGB to HEX pages convert between them directly, with the same contrast check.

And if the image itself needs work before you use it, the resizer changes its pixel size and the compressor brings it under a file size limit, both without uploading anything either.

FAQ

Color Picker from Image

The questions people ask most about picking colours.

Drop the image on the tool above and click the colour you want. The hex code appears with RGB and HSL beside it, all three ready to copy.

That is the only way this page works. Your browser reads the file from your own device and nothing is transmitted anywhere.

The eight colours the image is mostly made of, largest share first. It is usually more useful than a single pixel, because the colour people mean is rarely one exact dot.

Whichever the thing you are pasting into wants. They describe exactly the same colour. HSL is the one to choose when you want a lighter or darker version of the same hue.

It is the WCAG contrast ratio between that colour and black or white text, from 1 to 21. Ordinary body text is expected to reach 4.5, and large text 3.

Almost always because you hit an edge or a compressed area of a JPEG, which blends colours across small blocks. Use the palette, or start from a PNG.

Yes, and that is one of the most common uses. Screenshots are usually PNG, so the colours in them are exact.

Yes. Fully transparent pixels are ignored when the palette is worked out, so the colours you get are the ones that are actually drawn.

Completely, with no sign-up and no limit. Nothing is uploaded, so it costs us nothing to provide.

Yes. Tap the picture to pick a colour, or use the palette buttons underneath, which also work with a keyboard.

Yes. A hex color picker, a color wheel picker and a color code finder all describe this page. The names differ because people describe the same job differently; the job itself does not change.
More tools

Colour and image tools

Same idea, different job. Every one runs in your browser.

All developer tools

HEX to RGB

Turn a hex code into RGB and HSL, with a contrast check.

RGB to HEX

Every RGB notation accepted, hex code ready to copy.

Image Resizer

Change the pixel size of an image, keeping its shape.

Image Compressor

Bring an image under an exact size in kilobytes.

Need a different tool?

Over a hundred free tools, all running in your browser. Nothing is uploaded and nothing is capped.

Browse all tools Contact us